update vue, try to use vue virtual scroller, not great

package.json

@@ -29,11 +29,12 @@
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
     "v-tooltip": "^2.0.2",
-    "vue": "^2.5.13",
+    "vue": "^2.6.11",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",
+    "vue-virtual-scroller": "^1.0.0-rc.2",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.1",
     "whatwg-fetch": "^2.0.3"

src/components/account_actions/account_actions.vue

@@ -7,7 +7,7 @@
       placement="bottom-end"
       :offset="5"
     >
-      <div slot="popover">
+      <template v-slot:popover>
         <div class="dropdown-menu">
           <template v-if="user.following">
             <button
@@ -50,7 +50,7 @@
             {{ $t('user_card.report') }}
           </button>
         </div>
-      </div>
+      </template>
       <div class="btn btn-default ellipsis-button">
         <i class="icon-ellipsis trigger-button" />
       </div>

src/components/extra_buttons/extra_buttons.vue

@@ -5,7 +5,7 @@
     placement="top"
     class="extra-button-popover"
   >
-    <div slot="popover">
+    <template v-slot:popover>
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -46,7 +46,7 @@
           <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
         </button>
       </div>
-    </div>
+    </template>
     <div class="button-icon">
       <i class="icon-ellipsis" />
     </div>

src/components/moderation_tools/moderation_tools.vue

@@ -7,7 +7,7 @@
       @show="showDropDown = true"
       @hide="showDropDown = false"
     >
-      <div slot="popover">
+      <template v-slot:popover>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -120,7 +120,7 @@
             </button>
           </span>
         </div>
-      </div>
+      </template>
       <button
         class="btn btn-default btn-block"
         :class="{ pressed: showDropDown }"
@@ -133,11 +133,11 @@
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template slot="header">
+        <template v-slot:header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template slot="footer">
+        <template v-slot:footer>
           <button
             class="btn btn-default"
             @click="deleteUserDialog(false)"

src/components/selectable_list/selectable_list.vue

@@ -25,8 +25,7 @@
       :get-key="getKey"
     >
       <template
-        slot="item"
-        slot-scope="{item}"
+        v-slot:item="{item}"
       >
         <div
           class="selectable-list-item-inner"
@@ -44,7 +43,7 @@
           />
         </div>
       </template>
-      <template slot="empty">
+      <template v-slot:empty>
         <slot name="empty" />
       </template>
     </List>

src/components/status_popover/status_popover.vue

@@ -5,7 +5,7 @@
     :popper-options="popperOptions"
     @show="enter()"
   >
-    <template slot="popover">
+    <template v-slot:popover>
       <Status
         v-if="status"
         :is-preview="true"

src/components/style_switcher/style_switcher.vue

@@ -10,7 +10,7 @@
           :on-import="onImport"
           :validator="importValidator"
         >
-          <template slot="before">
+          <template v-slot:before>
             <div class="presets">
               {{ $t('settings.presets') }}
               <label

src/components/timeline/timeline.js

@@ -136,6 +136,7 @@ const Timeline = {
         userId: this.userId,
         tag: this.tag
       }).then(statuses => {
+        console.log(this.timeline.visibleStatuses)
         store.commit('setLoading', { timeline: this.timelineName, value: false })
         if (statuses && statuses.length === 0) {
           this.bottomedOut = true

src/components/timeline/timeline.vue

@@ -47,17 +47,30 @@
             :profile-user-id="userId"
           />
         </template>
-        <template v-for="status in timeline.visibleStatuses">
+        <DynamicScroller
+          :items="timeline.visibleStatuses"
+          :min-item-size="115"
+          page-mode
+          class="scroller"
+        >
+          <template v-slot="{ item, index, active }">
+            <DynamicScrollerItem
+              v-if="!excludedStatusIdsObject[item.id]"
+              :item="item"
+              :active="active"
+              :data-index="index"
+              :size-dependencies="[item.id]"
+            >
               <conversation
-            v-if="!excludedStatusIdsObject[status.id]"
-            :key="status.id"
                 class="status-fadein"
-            :status-id="status.id"
+                :status-id="item.id"
                 :collapsable="true"
                 :in-profile="inProfile"
                 :profile-user-id="userId"
               />
+            </DynamicScrollerItem>
           </template>
+        </DynamicScroller>
       </div>
     </div>
     <div :class="classes.footer">

src/components/user_profile/user_profile.vue

@@ -36,8 +36,7 @@
         >
           <FriendList :user-id="userId">
             <template
-              slot="item"
-              slot-scope="{item}"
+              v-slot:item="{item}"
             >
               <FollowCard :user="item" />
             </template>
@@ -51,8 +50,7 @@
         >
           <FollowerList :user-id="userId">
             <template
-              slot="item"
-              slot-scope="{item}"
+              v-slot:item="{item}"
             >
               <FollowCard
                 :user="item"

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -46,8 +46,7 @@
         <div class="user-reporting-panel-right">
           <List :items="statuses">
             <template
-              slot="item"
-              slot-scope="{item}"
+              v-slot:item="{item}"
             >
               <div class="status-fadein user-reporting-panel-sitem">
                 <Status

src/components/user_settings/user_settings.vue

@@ -460,7 +460,7 @@
               :placeholder="$t('settings.search_user_to_block')"
             >
               <BlockCard
-                slot-scope="row"
+                v-slot="row"
                 :user-id="row.item"
               />
             </Autosuggest>
@@ -470,8 +470,7 @@
             :get-key="identity"
           >
             <template
-              slot="header"
-              slot-scope="{selected}"
+              v-slot:header="{selected}"
             >
               <div class="profile-edit-bulk-actions">
                 <ProgressButton
@@ -480,7 +479,7 @@
                   :click="() => blockUsers(selected)"
                 >
                   {{ $t('user_card.block') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.block_progress') }}
                   </template>
                 </ProgressButton>
@@ -490,19 +489,18 @@
                   :click="() => unblockUsers(selected)"
                 >
                   {{ $t('user_card.unblock') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.unblock_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
             <template
-              slot="item"
-              slot-scope="{item}"
+              v-slot:item="{item}"
             >
               <BlockCard :user-id="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_blocks') }}
             </template>
           </BlockList>
@@ -516,7 +514,7 @@
               :placeholder="$t('settings.search_user_to_mute')"
             >
               <MuteCard
-                slot-scope="row"
+                v-slot="row"
                 :user-id="row.item"
               />
             </Autosuggest>
@@ -526,8 +524,7 @@
             :get-key="identity"
           >
             <template
-              slot="header"
-              slot-scope="{selected}"
+              v-slot:header="{selected}"
             >
               <div class="profile-edit-bulk-actions">
                 <ProgressButton
@@ -536,7 +533,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -546,19 +543,18 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
             <template
-              slot="item"
-              slot-scope="{item}"
+              v-slot:item="{item}"
             >
               <MuteCard :user-id="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>

src/main.js

@@ -29,6 +29,8 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 import VTooltip from 'v-tooltip'
+import VueVirtualScroller from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -41,6 +43,7 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
+Vue.use(VueVirtualScroller)
 Vue.use(VTooltip, {
   popover: {
     defaultTrigger: 'hover click',

yarn.lock

@@ -2317,6 +2317,7 @@ dateformat@^1.0.6:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
 debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
@@ -6876,6 +6877,11 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+scrollparent@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+  integrity sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=
+
 selenium-server@2.53.1:
   version "2.53.1"
   resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-2.53.1.tgz#d681528812f3c2e0531a6b7e613e23bb02cce8a6"
@@ -7895,6 +7901,11 @@ vue-loader@^14.0.0:
     vue-style-loader "^4.0.1"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-observe-visibility@^0.4.3:
+  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-resize@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
@@ -7912,8 +7923,9 @@ vue-style-loader@^4.0.0, vue-style-loader@^4.0.1:
     loader-utils "^1.0.2"
 
 vue-template-compiler@^2.3.4:
-  version "2.5.21"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz#a57ceb903177e8f643560a8d639a0f8db647054a"
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -7922,9 +7934,19 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
 
-vue@^2.5.13:
-  version "2.5.21"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
+vue-virtual-scroller@^1.0.0-rc.2:
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.0-rc.2.tgz#b03828496c87889641bdacc75510e5b1bf5bda7f"
+  integrity sha512-4YFx1a+QDP4f6HW/HBI/qHcmSTlh7BMH6IjEH8WC3ylt499cErl0LpvLLAx9yo3c6NtuK/XvjYXi0vvdxFB5dw==
+  dependencies:
+    scrollparent "^2.0.1"
+    vue-observe-visibility "^0.4.3"
+    vue-resize "^0.4.5"
+
+vue@^2.6.11:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
 vuelidate@^0.7.4:
   version "0.7.4"