perf(files): reuse vnode with unique key

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

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index c271a6965d7af912b3876fe5b79bc6924002176d..98b4dfca07cb121f0539ca371d25738fc40b0d36 100644 (file)
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-       <Fragment>
+       <tr :class="{'list__row--active': active}" class="list__row">
                <span v-if="source.attributes.failed" class="files-list__row--failed" />
 
                <td class="files-list__row-checkbox">
@@ -151,7 +151,7 @@
                                :render="column.render"
                                :source="source" />
                </td>
-       </Fragment>
+       </tr>
 </template>
 
 <script lang='ts'>
@@ -496,6 +496,7 @@ export default Vue.extend({
                source() {
                        this.resetState()
                        this.debounceIfNotCached()
+                       logger.debug('FileEntry source changed', { source: this.source })
                },
 
                /**

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 7780665ab6ba5b6ef166515540ce352474aeb89d..252be00413a5d1c93fa6174ea8a01fd07c506ea0 100644 (file)
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -12,17 +12,13 @@
 
                <!-- Body -->
                <tbody :style="tbodyStyle" class="files-list__tbody">
-                       <tr v-for="(item, i) in renderedItems"
+                       <component :is="dataComponent"
+                               v-for="(item, i) in renderedItems"
                                :key="i"
-                               :class="{'list__row--active': (i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)}"
-                               class="list__row">
-                               <component :is="dataComponent"
-                                       :active="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
-                                       :source="item"
-                                       :index="i"
-                                       :item-height="itemHeight"
-                                       v-bind="extraProps" />
-                       </tr>
+                               :active="(i >= bufferItems || index <= bufferItems) && (i < shownItems - bufferItems)"
+                               :source="item"
+                               :index="i"
+                               v-bind="extraProps" />
                </tbody>
 
                <!-- Footer -->
@@ -109,9 +105,6 @@ export default Vue.extend({
                        this.index = this.scrollToIndex
                        this.$el.scrollTop = this.index * this.itemHeight + this.beforeHeight
                },
-               index() {
-                       logger.debug('VirtualList index updated to ' + this.index)
-               },
        },
 
        mounted() {