Fix reactivity overload (frozen UI when displaying lots of files while developing in web-app-files)

changelog/unreleased/enhancement-resource-field-update

@@ -0,0 +1,6 @@
+Enhancement: Ability to update file resource fields
+
+We've introduced the ability to update individual resource fields only instead
+of updating the whole resource at once.
+
+https://github.com/owncloud/web/pull/5311

packages/web-app-files/src/components/AppBar.vue

@@ -498,7 +498,7 @@ export default {
         this.UPSERT_RESOURCE(resource)
 
         if (this.isPersonalRoute) {
-          await this.loadIndicators({
+          this.loadIndicators({
             client: this.$client,
             currentFolder: this.currentFolder.path,
             encodePath: this.encodePath

packages/web-app-files/src/store/actions.js

@@ -6,7 +6,7 @@ import { buildResource, buildShare, buildCollaboratorShare } from '../helpers/re
 import { $gettext, $gettextInterpolate } from '../gettext'
 import { privatePreviewBlob, publicPreviewUrl } from '../helpers/resource'
 import { avatarUrl } from '../helpers/user'
-import { has, set, cloneDeep } from 'lodash-es'
+import { has } from 'lodash-es'
 
 export default {
   updateFileProgress({ commit }, progress) {
@@ -506,55 +506,28 @@ export default {
     commit('LOAD_INDICATORS')
   },
 
-  async loadAvatars({ commit, rootGetters }, { resource }) {
-    const avatars = new Map()
-
+  loadAvatars({ commit, rootGetters }, { resource }) {
     ;['sharedWith', 'owner'].forEach(k => {
       ;(resource[k] || []).forEach((obj, i) => {
         if (!has(obj, 'avatar')) {
           return
         }
-        avatars.set(`${k}.[${i}].avatar`, obj.username)
+        avatarUrl(
+          {
+            username: obj.username,
+            server: rootGetters.configuration.server,
+            token: rootGetters.getToken
+          },
+          true
+        ).then(url =>
+          commit('UPDATE_RESOURCE_FIELD', {
+            id: resource.id,
+            field: `${k}.[${i}].avatar`,
+            value: url
+          })
+        )
       })
     })
-
-    if (!avatars.size) {
-      return
-    }
-
-    await Promise.all(
-      Array.from(avatars).map(avatar =>
-        (async () => {
-          let url
-          try {
-            url = await avatarUrl(
-              {
-                username: avatar[1],
-                server: rootGetters.configuration.server,
-                token: rootGetters.getToken
-              },
-              true
-            )
-          } catch (e) {
-            avatars.delete(avatar[0])
-            return
-          }
-
-          avatars.set(avatar[0], url)
-        })()
-      )
-    )
-
-    if (!avatars.size) {
-      return
-    }
-
-    const cResource = cloneDeep(resource)
-    avatars.forEach((value, key) => {
-      set(cResource, key, value)
-    })
-
-    commit('UPDATE_RESOURCE', cResource)
   },
 
   async loadPreview({ commit, rootGetters }, { resource, isPublic, dimensions }) {
@@ -584,8 +557,7 @@ export default {
     }
 
     if (preview) {
-      resource.preview = preview
-      commit('UPDATE_RESOURCE', resource)
+      commit('UPDATE_RESOURCE_FIELD', { id: resource.id, field: 'preview', value: preview })
     }
   }
 }

packages/web-app-files/src/store/mutations.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import pickBy from 'lodash-es/pickBy'
 import moment from 'moment'
-import { attachIndicators } from '../helpers/resources'
+import { set, has } from 'lodash-es'
+import { getIndicators } from '../helpers/statusIndicators'
 
 /**
  * @param {Array.<Object>} shares array of shares
@@ -297,9 +298,19 @@ export default {
   },
 
   LOAD_INDICATORS(state) {
-    const files = [...state.files]
-    files.forEach(resource => attachIndicators(resource, state.sharesTree))
-    state.files = files
+    for (const resource of state.files) {
+      const indicators = getIndicators(resource, state.sharesTree)
+
+      if (!indicators && !resource.indicators.length) {
+        continue
+      }
+
+      this.commit('Files/UPDATE_RESOURCE_FIELD', {
+        id: resource.id,
+        field: 'indicators',
+        value: indicators
+      })
+    }
   },
 
   SELECT_RESOURCES(state, resources) {
@@ -329,6 +340,31 @@ export default {
     $_upsertResource(state, resource, false)
   },
 
+  /**
+   * Updates a single resource field. If the resource with given id doesn't exist nothing will happen.
+   *
+   * @param state Current state of this store module
+   * @param params.id Id of the resource to be updated
+   * @param params.field the resource field that the value should be applied to
+   * @param params.value the value that will be attached to the key
+   */
+  UPDATE_RESOURCE_FIELD(state, params) {
+    const index = state.files.findIndex(r => r.id === params.id)
+    if (index < 0) {
+      return
+    }
+
+    const resource = state.files[index]
+    const isReactive = has(resource, params.field)
+    const newResource = set(resource, params.field, params.value)
+
+    if (isReactive) {
+      return
+    }
+
+    Vue.set(state.files, index, newResource)
+  },
+
   UPDATE_CURRENT_PAGE(state, page) {
     state.currentPage = parseInt(page)
   }

packages/web-app-files/src/views/LocationPicker.vue

@@ -308,7 +308,10 @@ export default {
         : await this.$client.files.list(target, 1, this.davProperties)
 
       this.loadFiles({ currentFolder: resources[0], files: resources.slice(1) })
-      this.loadIndicators({ client: this.$client, currentFolder: this.$route.params.item || '/' })
+      this.loadIndicators({
+        client: this.$client,
+        currentFolder: this.$route.params.item || '/'
+      })
       this.adjustTableHeaderPosition()
       this.loading = false
     },