load demo only when in viewport

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",

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>

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"