Improve resource loading within spaces

changelog/unreleased/enhancement-improve-space-resource-loading

@@ -0,0 +1,8 @@
+Enhancement: Improve resource loading within spaces
+
+We've improved the loading of resources within a space. This enhances performance and overall stability within spaces.
+
+* A new parameter was introduced to determine if a space needs to be fetched or not. Route changes within a space do not require the space the be fetched again. This also ensures that the space image and readme won't be fetched in subfolders.
+* The space now gets set at the end of the loading task. This ensures that the space task has finished as soon as the image and readme get loaded.
+
+https://github.com/owncloud/web/pull/6601

packages/web-app-files/src/services/folder/loaderProject.ts

@@ -3,9 +3,7 @@ import Router from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { isLocationSpacesActive } from '../../router'
 import { clientService } from 'web-pkg/src/services'
-import { useStore, useRouter } from 'web-pkg/src/composables'
 import { buildResource, buildSpace, buildWebDavSpacesPath } from '../../helpers/resources'
-import { unref } from '@vue/composition-api'
 
 export class FolderLoaderProject implements FolderLoader {
   public isEnabled(router: Router): boolean {
@@ -16,21 +14,27 @@ export class FolderLoaderProject implements FolderLoader {
     const router = context.router
     const store = context.store
 
-    const graphClient = clientService.graphAuthenticated(
-      store.getters.configuration.server,
-      store.getters.getToken
-    )
-
-    return useTask(function* (signal1, signal2, ref, sameRoute, path = null) {
+    return useTask(function* (signal1, signal2, ref, sameRoute, path = null, fetchSpace = true) {
       ref.CLEAR_CURRENT_FILES_LIST()
-      const spaceId = router.currentRoute.params.spaceId
-      const graphResponse = yield graphClient.drives.getDrive(spaceId)
 
-      if (!graphResponse.data) {
-        return
-      }
+      let space
+      if (fetchSpace) {
+        const graphClient = clientService.graphAuthenticated(
+          store.getters.configuration.server,
+          store.getters.getToken
+        )
+
+        const spaceId = router.currentRoute.params.spaceId
+        const graphResponse = yield graphClient.drives.getDrive(spaceId)
+
+        if (!graphResponse.data) {
+          return
+        }
 
-      ref.space = buildSpace(graphResponse.data)
+        space = buildSpace(graphResponse.data)
+      } else {
+        space = ref.space
+      }
 
       const webDavResponse = yield ref.$client.files.list(
         buildWebDavSpacesPath(ref.$route.params.spaceId, path || '')
@@ -39,7 +43,7 @@ export class FolderLoaderProject implements FolderLoader {
       let resources = []
       if (!path) {
         // space front page -> use space as current folder
-        resources.push(ref.space)
+        resources.push(space)
 
         const webDavResources = webDavResponse.map(buildResource)
         webDavResources.shift() // Remove webdav entry for the space itself
@@ -58,6 +62,10 @@ export class FolderLoaderProject implements FolderLoader {
         client: ref.$client,
         currentFolder: currentFolder?.path
       })
+
+      if (fetchSpace) {
+        ref.space = space
+      }
     })
   }
 }

packages/web-app-files/src/views/spaces/Project.vue

@@ -286,12 +286,12 @@ export default {
   },
   watch: {
     $route: {
-      handler: function (to, from) {
+      handler: async function (to, from) {
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
 
         if ((!sameRoute || !sameItem) && from) {
-          this.loadResourcesTask.perform(this, sameRoute, to.params.item)
+          await this.loadResourcesTask.perform(this, sameRoute, to.params.item, false)
         }
 
         if (this.$refs.markdownContainer) {