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.
+
+* The loading task will 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 when navigating into 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

@@ -14,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) {
  ref.CLEAR_CURRENT_FILES_LIST()
- const storageId = router.currentRoute.params.storageId
- const graphResponse = yield graphClient.drives.getDrive(storageId)
 
- if (!graphResponse.data) {
- return
- }
+ let space
+ if (!sameRoute) {
+ const graphClient = clientService.graphAuthenticated(
+ store.getters.configuration.server,
+ store.getters.getToken
+ )
+
+ const storageId = router.currentRoute.params.storageId
+ const graphResponse = yield graphClient.drives.getDrive(storageId)
+
+ 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.storageId, path || '')
@@ -37,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
@@ -56,6 +62,10 @@ export class FolderLoaderProject implements FolderLoader {
  client: ref.$client,
  currentFolder: currentFolder?.path
  })
+
+ if (!sameRoute) {
+ ref.space = space
+ }
  })
  }
 }

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

@@ -288,12 +288,12 @@ export default {
  },
  watch: {
  $route: {
- handler: function (to, from) {
- const sameRoute = to.name === from?.name
+ handler: async function (to, from) {
+ const sameRoute = to.name === from?.name && to.params?.storageId === from?.params?.storageId
  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)
  }
 
  if (this.$refs.markdownContainer) {