Improve long list rendering time

Speed up list rendering by wrapping list elements in a lazy container.
Only the first 16 elements are loaded at first. The rest is rendered
after it becomes visible.

package-lock.json

@@ -18872,6 +18872,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-observe-visibility": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
+      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",

package.json

@@ -33,6 +33,7 @@
     "vue": "^2.6.12",
     "vue-electron": "^1.0.6",
     "vue-i18n": "^8.21.0",
+    "vue-observe-visibility": "^0.4.6",
     "vue-router": "^3.4.3",
     "vuex": "^3.5.1",
     "xml2json": "^0.12.0",

src/renderer/App.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { ObserveVisibility } from 'vue-observe-visibility'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/side-nav/side-nav.vue'
 import FtToast from './components/ft-toast/ft-toast.vue'
@@ -7,6 +8,8 @@ import $ from 'jquery'
 let useElectron
 let shell
 
+Vue.directive('observe-visibility', ObserveVisibility)
+
 if (window && window.process && window.process.type === 'renderer') {
   /* eslint-disable-next-line */
   shell = require('electron').shell

src/renderer/components/ft-element-list/ft-element-list.js

@@ -1,18 +1,14 @@
 import Vue from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtAutoGrid from '../ft-auto-grid/ft-auto-grid.vue'
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
-import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
-import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
+import FtListLazyWrapper from '../ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue'
 
 export default Vue.extend({
   name: 'FtElementList',
   components: {
     'ft-flex-box': FtFlexBox,
     'ft-auto-grid': FtAutoGrid,
-    'ft-list-video': FtListVideo,
-    'ft-list-channel': FtListChannel,
-    'ft-list-playlist': FtListPlaylist
+    'ft-list-lazy-wrapper': FtListLazyWrapper
   },
   props: {
     data: {

src/renderer/components/ft-element-list/ft-element-list.vue

@@ -2,28 +2,13 @@
   <ft-auto-grid
     :grid="listType !== 'list'"
   >
-    <template
+    <ft-list-lazy-wrapper
       v-for="(result, index) in data"
-    >
-      <ft-list-channel
-        v-if="result.type === 'channel'"
-        :key="index"
-        appearance="result"
-        :data="result"
-      />
-      <ft-list-video
-        v-if="result.type === 'video' || result.type === 'shortVideo'"
-        :key="index"
-        appearance="result"
-        :data="result"
-      />
-      <ft-list-playlist
-        v-if="result.type === 'playlist'"
-        :key="index"
-        appearance="result"
-        :data="result"
-      />
-    </template>
+      :key="index"
+      appearance="result"
+      :data="result"
+      :first-screen="index < 16"
+    />
   </ft-auto-grid>
 </template>
 

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css

@@ -0,0 +1,3 @@
+.lazyWrapper {
+  min-height: 264px;
+}

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
+import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
+
+export default Vue.extend({
+  name: 'FtListLazyWrapper',
+  components: {
+    'ft-list-video': FtListVideo,
+    'ft-list-channel': FtListChannel,
+    'ft-list-playlist': FtListPlaylist
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    appearance: {
+      type: String,
+      required: true
+    },
+    firstScreen: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data: function () {
+    return {
+      visible: this.firstScreen
+    }
+  },
+  methods: {
+    onVisibilityChanged: function (visible) {
+      this.visible = visible
+    }
+  }
+})

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    v-observe-visibility="firstScreen ? false : {
+      callback: onVisibilityChanged,
+      once: true,
+    }"
+    class="lazyWrapper"
+  >
+    <ft-list-channel
+      v-if="data.type === 'channel' && visible"
+      :appearance="appearance"
+      :data="data"
+    />
+    <ft-list-video
+      v-if="(data.type === 'video' || data.type === 'shortVideo') && visible"
+      :appearance="appearance"
+      :data="data"
+    />
+    <ft-list-playlist
+      v-if="data.type === 'playlist' && visilbe"
+      :appearance="appearance"
+      :data="data"
+    />
+  </div>
+</template>
+
+<script src="./ft-list-lazy-wrapper.js" />
+<style scoped src="./ft-list-lazy-wrapper.css" />