Port virtual list perf improvements from F2V

Signed-off-by: Louis Chemineau <louis@chmn.me>

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%;

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>