perf(files): performance optimizations

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -35,8 +35,8 @@
 		<!-- Menu actions -->
 		<NcActions v-if="visible"
 			ref="actionsMenu"
-			:boundaries-element="getBoundariesElement()"
-			:container="getBoundariesElement()"
+			:boundaries-element="getBoundariesElement"
+			:container="getBoundariesElement"
 			:disabled="isLoading || loading !== ''"
 			:force-name="true"
 			:force-menu="enabledInlineActions.length === 0 /* forceMenu only if no inline actions */"
@@ -70,6 +70,8 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
+import CustomElementRender from '../CustomElementRender.vue'
+
 import logger from '../../logger.js'
 
 // The registered actions list
@@ -83,6 +85,7 @@ export default Vue.extend({
 		NcActions,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
+		CustomElementRender,
 	},
 
 	props: {
@@ -182,9 +185,7 @@ export default Vue.extend({
 				this.$emit('update:opened', value)
 			},
 		},
-	},
 
-	methods: {
 		/**
 		 * Making this a function in case the files-list
 		 * reference changes in the future. That way we're
@@ -193,7 +194,9 @@ export default Vue.extend({
 		getBoundariesElement() {
 			return document.querySelector('.app-content > table.files-list')
 		},
+	},
 
+	methods: {
 		actionDisplayName(action: FileAction) {
 			if (this.filesListWidth < 768 && action.inline && typeof action.title === 'function') {
 				// if an inline action is rendered in the menu for

apps/files/src/components/FileEntry/FileEntryPreview.vue

@@ -22,9 +22,9 @@
 <template>
 	<span class="files-list__row-icon">
 		<template v-if="source.type === 'folder'">
-			<FolderOpenIcon v-if="dragover" />
+			<FolderOpenIcon v-once v-if="dragover" />
 			<template v-else>
-				<FolderIcon />
+				<FolderIcon v-once />
 				<OverlayIcon :is="folderOverlay"
 					v-if="folderOverlay"
 					class="files-list__row-icon-overlay" />
@@ -41,13 +41,13 @@
 			@error="backgroundFailed = true"
 			@load="backgroundFailed = false">
 
-		<FileIcon v-else />
+		<FileIcon v-once v-else />
 
 		<!-- Favorite icon -->
 		<span v-if="isFavorite"
 			class="files-list__row-icon-favorite"
 			:aria-label="t('files', 'Favorite')">
-			<FavoriteIcon />
+			<FavoriteIcon v-once />
 		</span>
 	</span>
 </template>

apps/files/src/components/FilesListVirtual.vue

@@ -312,6 +312,8 @@ export default Vue.extend({
 	&::v-deep {
 		// Table head, body and footer
 		tbody {
+			will-change: scroll-position, padding;
+			contain: layout paint style;
 			display: flex;
 			flex-direction: column;
 			width: 100%;
@@ -320,6 +322,7 @@ export default Vue.extend({
 
 			/* Hover effect on tbody lines only */
 			tr {
+				contain: strict;
 				&:hover,
 				&:focus {
 					background-color: var(--color-background-dark);
@@ -329,6 +332,7 @@ export default Vue.extend({
 
 		// Before table and thead
 		.files-list__before {
+			contain: strict;
 			display: flex;
 			flex-direction: column;
 		}

apps/files/src/components/VirtualList.vue

@@ -18,7 +18,7 @@
 			<component :is="dataComponent"
 				v-for="({key, item}, i) in renderedItems"
 				:key="key"
-				:visible="(i >= bufferItems - 1 || index <= bufferItems) && (i <= shownItems - bufferItems)"
+				:visible="true"
 				:source="item"
 				:index="i"
 				v-bind="extraProps" />
@@ -211,7 +211,7 @@ export default Vue.extend({
 		}
 
 		// Adding scroll listener AFTER the initial scroll to index
-		this.$el.addEventListener('scroll', this.onScroll)
+		this.$el.addEventListener('scroll', this.onScroll, { passive: true })
 
 		this.$_recycledPool = {} as Record<string, any>
 	},
@@ -232,11 +232,14 @@ export default Vue.extend({
 		},
 
 		onScroll() {
-			const topScroll = this.$el.scrollTop - this.beforeHeight
-			const index = Math.floor(topScroll / this.itemHeight) * this.columnCount
-			// Max 0 to prevent negative index
-			this.index = Math.max(0, index)
-			this.$emit('scroll')
+			this._onScrollHandle ??= requestAnimationFrame(() => {
+				this._onScrollHandle = null;
+				const topScroll = this.$el.scrollTop - this.beforeHeight
+				const index = Math.floor(topScroll / this.itemHeight) * this.columnCount
+				// Max 0 to prevent negative index
+				this.index = Math.max(0, index)
+				this.$emit('scroll')
+			});
 		},
 	},
 })