refs #1766 Introduce vue-virtual-scroll in Home

package.json

@@ -200,6 +200,7 @@
     "vue-resize": "^0.5.0",
     "vue-router": "^3.4.3",
     "vue-shortkey": "^3.1.7",
+    "vue-virtual-scroller": "^1.0.10",
     "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   },

src/renderer/components/TimelineSpace.vue

@@ -10,7 +10,7 @@
   >
     <side-menu></side-menu>
     <div :class="collapse ? 'page-narrow' : 'page'">
-      <header class="header" style="-webkit-app-region: drag;">
+      <header class="header" style="-webkit-app-region: drag">
         <header-menu></header-menu>
       </header>
       <contents></contents>

src/renderer/components/TimelineSpace/Contents.vue

@@ -49,7 +49,7 @@ export default {
       openSideBar: state => state.openSideBar
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
-    customWidth: function() {
+    customWidth: function () {
       return {
         '--current-sidebar-width': `${this.sidebarWidth}px`
       }
@@ -77,7 +77,7 @@ export default {
 #contents {
   --current-sidebar-width: 360px;
 
-  padding-top: 48px;
+  padding-top: 49px;
   height: 100%;
   box-sizing: border-box;
   user-select: text;

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -2,23 +2,25 @@
   <div id="home" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
     <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <transition-group name="timeline" tag="div">
-      <div class="home-timeline" v-for="message in filteredTimeline" :key="message.uri + message.id">
+    <DynamicScroller :items="filteredTimeline" :min-item-size="10" class="scroller" page-mode>
+      <template v-slot="{ item, index, active }">
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
           <toot
-          :message="message"
+            :message="item"
             :filter="filter"
-          :focused="message.uri + message.id === focusedId"
+            :focused="item.uri + item.id === focusedId"
             :overlaid="modalOpened"
             v-on:update="updateToot"
             v-on:delete="deleteToot"
             @focusNext="focusNext"
             @focusPrev="focusPrev"
             @focusRight="focusSidebar"
-          @selectToot="focusToot(message)"
+            @selectToot="focusToot(item)"
           >
           </toot>
-      </div>
-    </transition-group>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
     <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>

src/renderer/main.ts

@@ -11,6 +11,8 @@ import shortkey from 'vue-shortkey'
 import VueI18Next from '@panter/vue-i18next'
 import 'vue-resize/dist/vue-resize.css'
 import VueResize from 'vue-resize'
+import VueVirtualScroller from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 import './assets/fonts/fonts.css'
 import App from './App.vue'
@@ -22,6 +24,7 @@ Vue.use(ElementUI, { locale })
 Vue.use(shortkey)
 Vue.use(VueI18Next)
 Vue.use(VueResize)
+Vue.use(VueVirtualScroller)
 Vue.component('icon', Icon)
 Vue.component('popper', Popper)
 

yarn.lock

@@ -11213,6 +11213,11 @@ schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0, schema-utils@^2.7
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+scrollparent@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -13313,6 +13318,11 @@ vue-loader@^15.9.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-observe-visibility@^0.4.4:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
+  integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
+
 vue-popperjs@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-popperjs/-/vue-popperjs-2.3.0.tgz#9cfa052878a3b47b670339ea81e05edcb863200f"
@@ -13321,6 +13331,11 @@ vue-popperjs@^2.3.0:
     opencollective-postinstall "^2.0.2"
     popper.js "^1.15.0"
 
+vue-resize@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
+  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
+
 vue-resize@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.5.0.tgz#f55bb2b721a0ebcdfad8f3c14dfd00e3fd0fd913"
@@ -13360,6 +13375,15 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-virtual-scroller@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz#fdf243240001f05bd79aa77f2e2e60403760e2fb"
+  integrity sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==
+  dependencies:
+    scrollparent "^2.0.1"
+    vue-observe-visibility "^0.4.4"
+    vue-resize "^0.4.5"
+
 vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"