Port virtual list perf improvements from F2V

Signed-off-by: Louis Chemineau <louis@chmn.me>
nextcloud · Nov 20, 2023 · a5be889 · a5be889
1 parent b4b5950
commit a5be889
Show file tree

Hide file tree

Showing 22 changed files with 49 additions and 45 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...ebounce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-40ca61.js b/...ebounce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-40ca61.js
diff --git a/...nce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-40ca61.js.map b/...nce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-40ca61.js.map
diff --git a/...ebounce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-d7fe8f.js b/...ebounce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-d7fe8f.js
diff --git a/...nce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-d7fe8f.js.map b/...nce_index_js-node_modules_vue-material-design-icons_ArrowLeft_vue-node_modu-d7fe8f.js.map
diff --git a/...ebounce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-6765c8.js b/...ebounce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-6765c8.js
diff --git a/...nce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-6765c8.js.map b/...nce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-6765c8.js.map
diff --git a/...ebounce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-9baf7e.js b/...ebounce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-9baf7e.js
diff --git a/...nce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-9baf7e.js.map b/...nce_index_js-node_modules_vue-material-design-icons_PackageVariant_vue-node-9baf7e.js.map
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js b/js/photos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js
diff --git a/...tos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js.map b/...tos-src_components_Collection_CollectionContent_vue-src_components_FilesPicker_vue.js.map
diff --git a/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js b/...rtControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js
diff --git a/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map b/...ntrollerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js.map
diff --git a/js/photos-src_views_FaceContent_vue.js b/js/photos-src_views_FaceContent_vue.js
diff --git a/js/photos-src_views_FaceContent_vue.js.map b/js/photos-src_views_FaceContent_vue.js.map
diff --git a/src/components/File.vue b/src/components/File.vue
@@ -78,7 +78,10 @@
 			<span class="input-label">{{ t('photos', 'Select image {imageName}', {imageName: file.basename}) }}</span>
 		</NcCheckboxRadioSwitch>
 
-		<Star v-if="file.favorite === 1" class="favorite-state" :aria-label="t('photos', 'The file is in the favorites')" />
+		<Star v-if="file.favorite === 1"
+			v-once
+			class="favorite-state"
+			:aria-label="t('photos', 'The file is in the favorites')" />
 	</div>
 </template>
 
@@ -223,6 +226,7 @@ export default {
 
 <style lang="scss" scoped>
 .file-container {
+	contain: strict;
 	background: var(--color-primary-element-light);
 	position: relative;
 	height: 100%;

diff --git a/src/components/VirtualScrolling.vue b/src/components/VirtualScrolling.vue
@@ -38,8 +38,6 @@
 </template>
 
 <script>
-import { debounce } from 'debounce'
-
 import logger from '../services/logger.js'
 
 /**
@@ -322,14 +320,14 @@ export default {
 		})
 
 		if (this.useWindow) {
-			window.addEventListener('resize', this.updateContainerSize)
+			window.addEventListener('resize', this.updateContainerSize, { passive: true })
 			this.containerHeight = window.innerHeight
 		} else {
 			this.resizeObserver.observe(this.container)
 		}
 
 		this.resizeObserver.observe(this.$refs.rowsContainer)
-		this.container.addEventListener('scroll', this.updateScrollPosition)
+		this.container.addEventListener('scroll', this.updateScrollPosition, { passive: true })
 	},
 
 	beforeDestroy() {
@@ -342,16 +340,16 @@ export default {
 	},
 
 	methods: {
-		// Debouncing by a tiny amount helps a bit to reduce computation cycles.
-		// From a quick tests, 6 cycle are triggered on a big scroll without debounce.
-		// This is reduce to 4 with this tiny debounce.
-		updateScrollPosition: debounce(function() {
-			if (this.useWindow) {
-				this.scrollPosition = this.container.scrollY
-			} else {
-				this.scrollPosition = this.container.scrollTop
-			}
-		}, 5),
+		updateScrollPosition() {
+			this._onScrollHandle ??= requestAnimationFrame(() => {
+				this._onScrollHandle = null
+				if (this.useWindow) {
+					this.scrollPosition = this.container.scrollY
+				} else {
+					this.scrollPosition = this.container.scrollTop
+				}
+			})
+		},
 
 		updateContainerSize() {
 			this.containerHeight = window.innerHeight
@@ -368,5 +366,7 @@ export default {
 
 .vs-rows-container {
 	box-sizing: border-box;
+	will-change: scroll-position, padding;
+	contain: layout paint style;
 }
 </style>