Improve performance when loading share inidicators

owncloud · Jun 28, 2022 · afcaa4c · afcaa4c
1 parent 06c1383
commit afcaa4c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 23 deletions.
diff --git a/changelog/unreleased/enhancement-share-indicators-performance b/changelog/unreleased/enhancement-share-indicators-performance
@@ -0,0 +1,9 @@
+Enhancement: Improve performance when loading share indicators
+
+We've improved the performance when loading share indicators in resource tables:
+
+* Re-use the indicators of a shared parent resource to save up loading them for each child resource
+* Make loading of indicators blocking to prohibit the re-rendering of table rows
+
+https://github.com/owncloud/web/issues/7038
+https://github.com/owncloud/web/pull/7187
diff --git a/packages/web-app-files/src/services/folder/legacy/loaderPersonal.ts b/packages/web-app-files/src/services/folder/legacy/loaderPersonal.ts
@@ -7,6 +7,7 @@ import { isLocationSpacesActive } from '../../../router'
 import { Store } from 'vuex'
 import { fetchResources } from '../util'
 import get from 'lodash-es/get'
+import { getIndicators } from '../../../helpers/statusIndicators'
 
 export class FolderLoaderLegacyPersonal implements FolderLoader {
   public isEnabled(store: Store<any>): boolean {
@@ -39,20 +40,20 @@ export class FolderLoaderLegacyPersonal implements FolderLoader {
         resources = resources.map(buildResource)
 
         const currentFolder = resources.shift()
+        yield store.dispatch('Files/loadSharesTree', {
+          client,
+          path: currentFolder.path
+        })
+
+        for (const res of resources) {
+          res.indicators = getIndicators(res, store.state.Files.sharesTree)
+        }
 
         store.commit('Files/LOAD_FILES', {
           currentFolder,
           files: resources
         })
 
-        // load indicators
-        ;(() => {
-          store.dispatch('Files/loadIndicators', {
-            client: client,
-            currentFolder: currentFolder.path
-          })
-        })()
-
         // fetch user quota
         ;(async () => {
           const user = await client.users.getUser(router.currentRoute.params.storageId)

diff --git a/packages/web-app-files/src/services/folder/spaces/loaderPersonal.ts b/packages/web-app-files/src/services/folder/spaces/loaderPersonal.ts
@@ -7,6 +7,7 @@ import { isLocationSpacesActive } from '../../../router'
 import { Store } from 'vuex'
 import { fetchResources } from '../util'
 import get from 'lodash-es/get'
+import { getIndicators } from '../../../helpers/statusIndicators'
 
 export class FolderLoaderSpacesPersonal implements FolderLoader {
   public isEnabled(store: Store<any>): boolean {
@@ -36,19 +37,20 @@ export class FolderLoaderSpacesPersonal implements FolderLoader {
 
         const currentFolder = resources.shift()
 
+        yield store.dispatch('Files/loadSharesTree', {
+          client: clientService.owncloudSdk,
+          path: currentFolder.path
+        })
+
+        for (const res of resources) {
+          res.indicators = getIndicators(res, store.state.Files.sharesTree)
+        }
+
         store.commit('Files/LOAD_FILES', {
           currentFolder,
           files: resources
         })
 
-        // load indicators
-        ;(() => {
-          store.dispatch('Files/loadIndicators', {
-            client: clientService.owncloudSdk,
-            currentFolder: currentFolder.path
-          })
-        })()
-
         // fetch user quota
         ;(async () => {
           const user = await clientService.owncloudSdk.users.getUser(ref.user.id)

diff --git a/packages/web-app-files/src/services/folder/spaces/loaderProject.ts b/packages/web-app-files/src/services/folder/spaces/loaderProject.ts
@@ -7,6 +7,7 @@ import { buildResource, buildSpace, buildWebDavSpacesPath } from '../../../helpe
 import { DavProperties } from 'web-pkg/src/constants'
 import { Store } from 'vuex'
 import get from 'lodash-es/get'
+import { getIndicators } from '../../../helpers/statusIndicators'
 
 export class FolderLoaderSpacesProject implements FolderLoader {
   public isEnabled(store: Store<any>): boolean {
@@ -65,16 +66,20 @@ export class FolderLoaderSpacesProject implements FolderLoader {
       }
 
       const currentFolder = resources.shift()
+      yield store.dispatch('Files/loadSharesTree', {
+        client: clientService.owncloudSdk,
+        path: currentFolder.path
+      })
+
+      for (const res of resources) {
+        res.indicators = getIndicators(res, store.state.Files.sharesTree)
+      }
 
       ref.LOAD_FILES({
         currentFolder,
         files: resources
       })
-      ref.loadIndicators({
-        client: ref.$client,
-        currentFolder: currentFolder?.path,
-        storageId: space.id
-      })
+
       ref.UPSERT_SPACE(space)
 
       if (!sameRoute) {

diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
@@ -246,6 +246,11 @@ export default {
         continue
       }
 
+      // indicators were loaded before
+      if (indicators.length === resource.indicators.length) {
+        continue
+      }
+
       this.commit('Files/UPDATE_RESOURCE_FIELD', {
         id: resource.id,
         field: 'indicators',

diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
@@ -58,7 +58,7 @@ const selectors = {
 const spaceMocks = {
   noSpace: {},
   spaceWithReadmeAndImage: {
-    id: 1,
+    id: '1',
     name: 'space',
     root: { permissions: [{ roles: ['manager'], grantedTo: [{ user: { id: 1 } }] }] },
     special: [
@@ -75,7 +75,7 @@ const spaceMocks = {
     ]
   },
   spaceWithoutReadmeAndImage: {
-    id: 1,
+    id: '1',
     name: 'space',
     root: { permissions: [{ roles: ['manager'], grantedTo: [{ user: { id: 1 } }] }] },
     special: []