#242 [sources] add lazy hydration

components/Source.vue

@@ -1,4 +1,5 @@
 <template>
+    <LazyHydrate when-visible>
     <div class="my-2 clearfix" v-if="!deleted">
         <h3 class="h6">
             <Icon :v="source.icon()"/>
@@ -85,12 +86,15 @@
             </ul>
         </div>
     </div>
+    </LazyHydrate>
 </template>
 
 <script>
     import {pronounLibrary} from "../src/data";
+    import LazyHydrate from 'vue-lazy-hydration';
 
     export default {
+        components: { LazyHydrate },
         name: 'Source',
         props: {
             source: { required: true },

package.json

@@ -43,6 +43,7 @@
     "suml-loader": "^0.1.1",
     "ulid": "^2.3.0",
     "vue-client-only": "^2.1.0",
+    "vue-lazy-hydration": "^2.0.0-beta.4",
     "vue-matomo": "^3.13.5-0",
     "vuedraggable": "^2.24.3",
     "webpack": "^5.0",

yarn.lock

@@ -10107,6 +10107,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-lazy-hydration@^2.0.0-beta.4:
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/vue-lazy-hydration/-/vue-lazy-hydration-2.0.0-beta.4.tgz#11e7021a9bac003ea6ed74f132dcd0d025fafc1f"
+  integrity sha512-bhr7AxzrSEPed4cOawIeCxJmR8pglberR78x1zs0886xR+47/EXE9s0Ezss90CPINo8ApzUfA/r+SbNffn+t9w==
+
 vue-loader@^15.9.6:
   version "15.9.6"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b"