From c1ce439399338196d42574456e176382dc8000fc Mon Sep 17 00:00:00 2001
From: Mykyta Poturai <mykyta.poturai@tutanota.com>
Date: Mon, 24 Aug 2020 22:50:03 +0300
Subject: [PATCH] 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                             |  5 +++
 package.json                                  |  1 +
 src/renderer/App.js                           |  3 ++
 .../ft-element-list/ft-element-list.js        |  8 +---
 .../ft-element-list/ft-element-list.vue       | 27 +++-----------
 .../ft-list-lazy-wrapper.css                  |  3 ++
 .../ft-list-lazy-wrapper.js                   | 37 +++++++++++++++++++
 .../ft-list-lazy-wrapper.vue                  | 28 ++++++++++++++
 8 files changed, 85 insertions(+), 27 deletions(-)
 create mode 100644 src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
 create mode 100644 src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
 create mode 100644 src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue

diff --git a/package-lock.json b/package-lock.json
index 55ff0c4e..a6618763 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 07ba7f3b..6d211718 100644
--- a/package.json
+++ b/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",
diff --git a/src/renderer/App.js b/src/renderer/App.js
index c91c064d..609c375a 100644
--- a/src/renderer/App.js
+++ b/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
diff --git a/src/renderer/components/ft-element-list/ft-element-list.js b/src/renderer/components/ft-element-list/ft-element-list.js
index c9cab911..744355c1 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.js
+++ b/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: {
diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 58398c57..c615b3e7 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/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>
 
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
new file mode 100644
index 00000000..d58d0725
--- /dev/null
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
@@ -0,0 +1,3 @@
+.lazyWrapper {
+  min-height: 264px;
+}
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
new file mode 100644
index 00000000..67c1fdb1
--- /dev/null
+++ b/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
+    }
+  }
+})
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
new file mode 100644
index 00000000..4e83c825
--- /dev/null
+++ b/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" />