Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: switch file list to vue-virtual-scroller #40955

Closed
wants to merge 1 commit into from
Closed

perf: switch file list to vue-virtual-scroller #40955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/files/src/components/FileEntry.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@
<!-- Icon or preview -->
<span class="files-list__row-icon" @click="execDefaultAction">
<template v-if="source.type === 'folder'">
<FolderOpenIcon v-if="dragover" />
<FolderOpenIcon v-once v-if="dragover" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v-once is still a good idea! 👍

<template v-else>
<FolderIcon />
<FolderIcon v-once />
<OverlayIcon :is="folderOverlay"
v-if="folderOverlay"
class="files-list__row-icon-overlay" />
Expand All @@ -69,13 +69,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>

Expand Down
1 change: 0 additions & 1 deletion apps/files/src/components/FilesListTableFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@ export default Vue.extend({
<style scoped lang="scss">
// Scoped row
tr {
padding-bottom: 300px;
border-top: 1px solid var(--color-border);
// Prevent hover effect on the whole row
background-color: transparent !important;
Expand Down
12 changes: 0 additions & 12 deletions apps/files/src/components/FilesListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,20 +278,9 @@ export default Vue.extend({
--clickable-area: 44px;
--icon-preview-size: 32px;

display: block;
overflow: auto;
height: 100%;

&::v-deep {
// Table head, body and footer
tbody {
display: flex;
flex-direction: column;
width: 100%;
// Necessary for virtual scrolling absolute
position: relative;
}

// Before table and thead
.files-list__before {
display: flex;
Expand All @@ -310,7 +299,6 @@ export default Vue.extend({
// Table header
.files-list__thead {
// Pinned on top when scrolling
position: sticky;
z-index: 10;
top: 0;
}
Expand Down
140 changes: 49 additions & 91 deletions apps/files/src/components/VirtualList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,37 +7,50 @@

<!-- Header -->
<thead ref="thead" class="files-list__thead" data-cy-files-list-thead>
<slot name="header" />
<slot name="header"></slot>
</thead>

<!-- Body -->
<tbody :style="tbodyStyle" class="files-list__tbody" data-cy-files-list-tbody>
<component :is="dataComponent"
v-for="(item, i) in renderedItems"
:key="i"
:visible="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
:source="item"
:index="i"
v-bind="extraProps" />
</tbody>

<!-- Footer -->
<tfoot v-show="isReady"
ref="tfoot"
class="files-list__tfoot"
data-cy-files-list-tfoot>
<slot name="footer" />
</tfoot>
<RecycleScroller
class="files-list__recycler"
list-class="files-list__tbody"
:items="dataSources"
:buffer="bufferPixels"
:item-size="itemHeight"
:key-field="dataKey"
>
<template v-slot="{ item, index }">
<component :is="dataComponent"
:visible="true"
:source="item"
:index="index"
v-bind="extraProps" />
</template>

<template #after>
<!-- Footer -->
<tfoot
ref="tfoot"
class="files-list__tfoot"
data-cy-files-list-tfoot>
<slot name="footer"></slot>
</tfoot>
</template>
</RecycleScroller>
</table>
</template>

<script lang="ts">
import { File, Folder, debounce } from 'debounce'
import { File, Folder } from '@nextcloud/files'
import Vue from 'vue'
import logger from '../logger.js'

// Items to render before and after the visible area
const bufferItems = 3
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.use(VueVirtualScroller);

// Pixels to render before and after the visible area
const bufferPixels = 400

export default Vue.extend({
name: 'VirtualList',
Expand Down Expand Up @@ -71,81 +84,14 @@ export default Vue.extend({

data() {
return {
bufferItems,
index: this.scrollToIndex,
beforeHeight: 0,
headerHeight: 0,
tableHeight: 0,
resizeObserver: null as ResizeObserver | null,
bufferPixels,
}
},

computed: {
// Wait for measurements to be done before rendering
isReady() {
return this.tableHeight > 0
},

startIndex() {
return Math.max(0, this.index - bufferItems)
},
shownItems() {
return Math.ceil((this.tableHeight - this.headerHeight) / this.itemHeight) + bufferItems * 2
},
renderedItems(): (File | Folder)[] {
if (!this.isReady) {
return []
}
return this.dataSources.slice(this.startIndex, this.startIndex + this.shownItems)
},

tbodyStyle() {
const isOverScrolled = this.startIndex + this.shownItems > this.dataSources.length
const lastIndex = this.dataSources.length - this.startIndex - this.shownItems
const hiddenAfterItems = Math.min(this.dataSources.length - this.startIndex, lastIndex)
return {
paddingTop: `${this.startIndex * this.itemHeight}px`,
paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * this.itemHeight}px`,
}
},
},
watch: {
scrollToIndex() {
this.index = this.scrollToIndex
this.$el.scrollTop = this.index * this.itemHeight + this.beforeHeight
},
},

mounted() {
const before = this.$refs?.before as HTMLElement
const root = this.$el as HTMLElement
const tfoot = this.$refs?.tfoot as HTMLElement
const thead = this.$refs?.thead as HTMLElement

this.resizeObserver = new ResizeObserver(debounce(() => {
this.beforeHeight = before?.clientHeight ?? 0
this.headerHeight = thead?.clientHeight ?? 0
this.tableHeight = root?.clientHeight ?? 0
logger.debug('VirtualList resizeObserver updated')
this.onScroll()
}, 100, false))

this.resizeObserver.observe(before)
this.resizeObserver.observe(root)
this.resizeObserver.observe(tfoot)
this.resizeObserver.observe(thead)

this.$el.addEventListener('scroll', this.onScroll)

if (this.scrollToIndex) {
this.$el.scrollTop = this.index * this.itemHeight + this.beforeHeight
}
},

beforeDestroy() {
if (this.resizeObserver) {
this.resizeObserver.disconnect()
}
},
},

methods: {
Expand All @@ -157,3 +103,15 @@ export default Vue.extend({
},
})
</script>

<style scoped lang="scss">
.files-list {
display: flex;
flex-flow: column;
overflow: hidden;

&__recycler {
flex: 1;
}
}
</style>