Use virtual scroller for big contacts list display performances

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

4 files changed, 58 insertions, 10 deletions

diff --git a/css/ContactsList.scss b/css/ContactsList.scss
index 676d4c64..30e603de 100644
--- a/css/ContactsList.scss
+++ b/css/ContactsList.scss
@@ -32,4 +32,15 @@
 	opacity: 0.6;
 	transform: rotate(180deg);
 	margin-top: 44px; // under the show navigation button
+}
+
+
+// Virtual scroller overrides
+.vue-recycle-scroller{
+	position: sticky !important;
+}
+
+.vue-recycle-scroller__item-view {
+	// same as app-content-list-item
+	height: 68px;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f7047e95..5401247c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2257,7 +2257,7 @@
       "dev": true
     },
     "cdav-library": {
-      "version": "github:nextcloud/cdav-library#d77d03e55eeffd7c7b184d18685726bb74aad8e2",
+      "version": "github:nextcloud/cdav-library#3ec4dae028f086fed3e1baa49ec6f6dd04c95043",
       "from": "github:nextcloud/cdav-library",
       "requires": {
         "@babel/polyfill": "^7.4.0"
@@ -9003,6 +9003,11 @@
         }
       }
     },
+    "scrollparent": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz",
+      "integrity": "sha1-cV1bnMV3YPsivczDvvtb/gaxoxc="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -9355,7 +9360,7 @@
     },
     "sprintf-js": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
@@ -10676,6 +10681,11 @@
       "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.4.tgz",
       "integrity": "sha512-ryd2Ybl56LE81IxlwbZUo4gAWnUSG45iUGX4KgVwsteitK2R+cOLwJaJescobpIDJnVlVorRUnX5u7my1vBu2w=="
     },
+    "vue-observe-visibility": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.3.tgz",
+      "integrity": "sha512-YyyO3a5OUkgpmC0NEf+xWJR0jVdFWzVbKRDzUumOVMhfr3+jxXEycYNHCM3rEO5lcj3ZNJpDomZEYEx0Wqqh9A=="
+    },
     "vue-resize": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.4.tgz",
@@ -10712,6 +10722,23 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-virtual-scroller": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.0.0-rc.2.tgz",
+      "integrity": "sha512-4YFx1a+QDP4f6HW/HBI/qHcmSTlh7BMH6IjEH8WC3ylt499cErl0LpvLLAx9yo3c6NtuK/XvjYXi0vvdxFB5dw==",
+      "requires": {
+        "scrollparent": "^2.0.1",
+        "vue-observe-visibility": "^0.4.3",
+        "vue-resize": "^0.4.5"
+      },
+      "dependencies": {
+        "vue-resize": {
+          "version": "0.4.5",
+          "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+          "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+        }
+      }
+    },
     "vue-visible": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/vue-visible/-/vue-visible-1.0.2.tgz",
diff --git a/package.json b/package.json
index 085d7f55..e2dfc42d 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
 		"vue-click-outside": "^1.0.7",
 		"vue-clipboard2": "^0.3.0",
 		"vue-router": "^3.0.2",
+		"vue-virtual-scroller": "^1.0.0-rc.2",
 		"vuex": "^3.1.0",
 		"vuex-router-sync": "^5.0.0"
 	},
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index e2475baf..8a95d155 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -21,23 +21,32 @@
   -->
 
 <template>
-	<div id="contacts-list" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list">
-		<!-- same uid can coexists between different addressbooks
-			so we need to use the addressbook id as key as well -->
-		<contacts-list-item v-for="(contact, index) in list" :key="contact.key" :contact="contacts[contact.key]"
-			:search-query="searchQuery" :list="list" :index="index"
-			@deleted="selectContact" />
-	</div>
+	<!-- same uid can coexists between different addressbooks
+		so we need to use the addressbook id as key as well -->
+	<recycle-scroller
+		id="contacts-list" :class="{'icon-loading': loading, showdetails: selectedContact}" class="app-content-list"
+		:items="list"
+		:item-size="68"
+		key-field="key">
+		<template v-slot="{ item, index }">
+			<contacts-list-item :contact="contacts[item.key]"
+				:search-query="searchQuery" :index="index" :key="item.key"
+				@deleted="selectContact" />
+		</template>
+	</recycle-scroller>
 </template>
 
 <script>
 import ContactsListItem from './ContactsList/ContactsListItem'
+import { RecycleScroller } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 export default {
 	name: 'ContactsList',
 
 	components: {
-		ContactsListItem
+		ContactsListItem,
+		RecycleScroller
 	},
 
 	props: {