From 7a20640872c01ec76991061e029cf31fee16f92b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 17:01:36 +0100
Subject: [PATCH] load demo only when in viewport

---
 docs/package.json                       |  1 +
 docs/src/components/DemoFrame/index.vue | 21 ++++++++++++++++++++-
 yarn.lock                               |  5 +++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/package.json b/docs/package.json
index cb85e109..da35ef4b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -28,6 +28,7 @@
     "simplify-js": "^1.2.4",
     "tippy.js": "^6.3.1",
     "vue-github-button": "^1.1.2",
+    "vue-observe-visibility": "^1.0.0",
     "y-indexeddb": "^9.0.6",
     "y-prosemirror": "^1.0.7",
     "y-webrtc": "^10.1.7",
diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index 410fe9e6..f45b4728 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/docs/src/components/DemoFrame/index.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="demo-frame" :class="{ 'is-inline': inline, 'is-loading': isLoading }">
+  <div
+    class="demo-frame"
+    :class="{ 'is-inline': inline, 'is-loading': isLoading }"
+    v-observe-visibility="{
+      callback: visibilityChanged,
+      once: true,
+    }"
+  >
     <div class="demo-frame__loader-wrapper" v-if="isLoading">
       <div class="demo-frame__loader" />
     </div>
@@ -11,11 +18,14 @@
       height="0"
       frameborder="0"
       @load="onLoad"
+      v-if="isVisible"
     />
   </div>
 </template>
 
 <script>
+import { ObserveVisibility } from 'vue-observe-visibility'
+
 export default {
   props: {
     name: {
@@ -39,9 +49,14 @@ export default {
     },
   },
 
+  directives: {
+    ObserveVisibility,
+  },
+
   data() {
     return {
       isLoading: true,
+      isVisible: false,
     }
   },
 
@@ -55,6 +70,10 @@ export default {
     onLoad() {
       this.isLoading = false
     },
+
+    visibilityChanged(isVisible) {
+      this.isVisible = isVisible
+    },
   },
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 87190937..27c74143 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14863,6 +14863,11 @@ vue-meta@^2.2.2:
   dependencies:
     deepmerge "^4.2.2"
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-router@^3.1.3:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"