feat(spaces): load project and mount point spaces on demand

Spaces were fetched in one bootstrap batch: personal and project in parallel
on login, mount points lazily on first access. Every session therefore paid
for listing every project drive - potentially hundreds on CERNBox - even when
it never opened one.

The personal space is still loaded up front, since virtually every part of the
app needs it. Project and mount point spaces are now fetched only when
something actually needs them: `loadSpacesByType` loads a type once per
session, shares in-flight requests between concurrent callers so a type is
never fetched twice, and deduplicates by id and driveAlias.

The drive resolver walks personal -> project -> mount point, retrying after
each type lands, and only falls back to the catch-all once every type has been
tried - so a location is never attributed to the fallback merely because its
real space hadn't been fetched yet.

Views that show or depend on those types refresh them on entry, so newly
created projects and newly accepted shares appear without a page reload:
the Spaces overview and Shared with me both refresh project and mount point
spaces, the latter via a new `force` flag that re-fetches an already
initialized type (additively - known spaces are not duplicated).

`spacesLoading` keeps meaning "the initial bootstrap is running" and is
deliberately not flipped by on-demand loads: the application layout swaps the
whole router view for a spinner while it is true, so a view that refreshes
spaces on mount would unmount and remount itself in an endless loop.
`spacesInitialized` likewise keeps meaning "bootstrap finished", not
"everything is loaded" - redefining it would leave `areSpacesLoading`
permanently true and hang the drive resolver.

`reloadProjectSpaces` now also evicts same-alias share/mountpoint entries:
with lazy loading those can arrive before the project spaces, and a
synthesized share root must never shadow the real project space it was
derived from.

`initializedTypes` is exposed as state rather than through `isTypeInitialized`
because createTestingPinia stubs every function a store returns.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: diocas

packages/web-app-files/src/index.ts

@@ -77,7 +77,9 @@ export const navItems = (context: ComponentCustomProperties): AppNavigationItem[
           : []
       },
       isVisible() {
-        if (!spacesStores.spacesInitialized) {
+        // personal spaces are fetched on demand, so "not loaded yet" must not read as "the user
+        // has none" - that would hide the item for the rest of the session
+        if (!spacesStores.initializedTypes.personal) {
           return true
         }
 

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

@@ -21,10 +21,18 @@ export class FolderLoaderSharedWithMe implements FolderLoader {
       resourcesStore.clearResourceList()
       resourcesStore.setAncestorMetaData({})
 
+      // project and mount point spaces are loaded on demand - refresh both here so newly accepted
+      // shares resolve to their real space instead of falling back
+      yield spacesStore.reloadProjectSpaces({
+        graphClient: clientService.graphAuthenticated,
+        signal: signal1
+      })
+
       if (configStore.options.routing.fullShareOwnerPaths) {
         yield spacesStore.loadMountPoints({
           graphClient: clientService.graphAuthenticated,
-          signal: signal1
+          signal: signal1,
+          force: true
         })
       }
 

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

@@ -280,8 +280,12 @@ export default defineComponent({
     const { setSelection, initResourceList, clearResourceList, setAncestorMetaData } =
       useResourcesStore()
 
-    const userHasPersonalSpace = !!spacesStore.spaces.find(
-      (drive) => isPersonalSpaceResource(drive) && drive.isOwner(userStore.user)
+    // must be reactive: personal spaces are loaded on demand, so evaluating this once during
+    // setup would pin it to `false` on a cold start
+    const userHasPersonalSpace = computed(() =>
+      spacesStore.spaces.some(
+        (drive) => isPersonalSpaceResource(drive) && drive.isOwner(userStore.user)
+      )
     )
     const visibilityOption = useRouteQueryPersisted({
       name: 'q_projectVisibility',
@@ -311,10 +315,17 @@ export default defineComponent({
     const loadResourcesTask = useTask(function* (signal) {
       clearResourceList()
       setAncestorMetaData({})
+      // project and mount point spaces are loaded on demand - refresh both here so newly created
+      // projects and newly accepted shares show up without a page reload
       yield spacesStore.reloadProjectSpaces({
         graphClient: clientService.graphAuthenticated,
         signal
       })
+      yield spacesStore.loadMountPoints({
+        graphClient: clientService.graphAuthenticated,
+        signal,
+        force: true
+      })
       initResourceList({ currentFolder: null, resources: unref(spaces) })
     })
 
@@ -432,7 +443,7 @@ export default defineComponent({
 
     const hasCreatePermission = computed(
       // if user has a personal space, it's not a lightweight account
-      () => can('create-all', 'Drive') && userHasPersonalSpace
+      () => can('create-all', 'Drive') && unref(userHasPersonalSpace)
     )
 
     const extensionRegistry = useExtensionRegistry()

packages/web-app-files/tests/unit/index.spec.ts

@@ -26,9 +26,18 @@ describe('Web app files', () => {
         spacesStore.spaces = [
           mock<SpaceResource>({ id: '1', driveType: 'project', isOwner: () => false })
         ]
+        // only once personal spaces have actually been fetched does "none present" mean the user
+        // has none
+        spacesStore.setTypeInitialized('personal', true)
         const items = navItems(undefined)
         expect(items[0].isVisible()).toBeFalsy()
       })
+      it('stays visible while personal spaces have not been loaded yet', () => {
+        const spacesStore = useSpacesStore()
+        spacesStore.spaces = []
+        const items = navItems(undefined)
+        expect(items[0].isVisible()).toBeTruthy()
+      })
     })
     describe('Spaces', () => {
       it.each([

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -11,7 +11,7 @@
       :resource="resource"
       @close="closeApp"
     />
-    <loading-screen v-if="loading" />
+    <loading-screen v-if="isLoading" />
     <error-screen v-else-if="loadingError" :message="loadingError.message" />
     <div
       v-else
@@ -217,6 +217,12 @@ export default defineComponent({
       applicationId: props.applicationId
     })
 
+    // components that load their own resource keep `loading` false from the start, so without this
+    // the slot would render before the drive resolver has produced a file context. Resolving a
+    // space is asynchronous (drive types are fetched on demand), and everything below - `slotAttrs`
+    // included - assumes a context is there.
+    const isLoading = computed(() => unref(loading) || !unref(currentFileContext))
+
     const { applicationMeta } = useAppMeta({ applicationId: props.applicationId, appsStore })
 
     const fileSizeLimit = computed(() => {
@@ -669,7 +675,7 @@ export default defineComponent({
 
     const slotAttrs = computed(() => ({
       url: unref(url),
-      space: unref(unref(currentFileContext).space),
+      space: unref(unref(currentFileContext)?.space),
       resource: unref(resource),
       activeFiles: unref(activeFiles),
       isDirty: unref(isDirty),
@@ -681,7 +687,7 @@ export default defineComponent({
 
       'onUpdate:resource': (value: Resource) => {
         resource.value = value
-        space.value = unref(unref(currentFileContext).space)
+        space.value = unref(unref(currentFileContext)?.space)
         selectedResources.value = [value]
       },
       'onUpdate:currentContent': (value: unknown) => {
@@ -704,6 +710,7 @@ export default defineComponent({
       closeApp,
       fileActions,
       loading,
+      isLoading,
       loadingError,
       pageTitle,
       resource,

packages/web-pkg/src/composables/driveResolver/useDriveResolver.ts

@@ -12,7 +12,7 @@ import { useSpacesLoading } from './useSpacesLoading'
 import { queryItemAsString } from '../appDefaults'
 import { urlJoin } from '@ownclouders/web-client'
 import { useClientService } from '../clientService'
-import { useSpacesStore, useConfigStore } from '../piniaStores'
+import { useSpacesStore, useConfigStore, LOADABLE_DRIVE_TYPES } from '../piniaStores'
 import { onUnmounted } from 'vue'
 
 interface DriveResolverOptions {
@@ -80,102 +80,118 @@ export const useDriveResolver = (options: DriveResolverOptions = {}): DriveResol
     }
   })
 
-  watch(
-    [options.driveAliasAndItem, areSpacesLoading],
-    async ([driveAliasAndItem, areSpacesLoading], [driveAliasAndItemOld, areSpacesLoadingOld]) => {
-      if (driveAliasAndItem === driveAliasAndItemOld && areSpacesLoading === areSpacesLoadingOld) {
-        return
-      }
+  const resolve = async (driveAliasAndItem: string) => {
+    if (!driveAliasAndItem || driveAliasAndItem.startsWith('virtual/')) {
+      space.value = null
+      item.value = null
+      return
+    }
 
-      if (!driveAliasAndItem || driveAliasAndItem.startsWith('virtual/')) {
-        space.value = null
-        item.value = null
-        return
+    const resolvedSpace = unref(space)
+    // never latch onto the fallback: a deeper path may be covered by a real space that we
+    // either already hold or can still lazily load, so always re-resolve. For real spaces the
+    // shortcut is kept, but segment-aware: `eos/project/c/cern` must not swallow
+    // `eos/project/c/cernbox/x` (which would yield item `box/x` on the wrong space).
+    const isOnlyItemPathChanged =
+      !!resolvedSpace &&
+      !isFallbackSpaceResource(resolvedSpace) &&
+      isSegmentPrefix(driveAliasAndItem, resolvedSpace.driveAlias)
+    if (isOnlyItemPathChanged) {
+      item.value = urlJoin(driveAliasAndItem.slice(resolvedSpace.driveAlias.length), {
+        leadingSlash: true
+      })
+      return
+    }
+
+    let matchingSpace = null
+    let path = null
+    if (driveAliasAndItem.startsWith('public/') || driveAliasAndItem.startsWith('ocm/')) {
+      const [publicLinkToken, ...item] = driveAliasAndItem.split('/').slice(1)
+      matchingSpace = unref(spaces).find((s) => s.id === publicLinkToken)
+      path = item.join('/')
+    } else if (
+      driveAliasAndItem.startsWith('share/') ||
+      driveAliasAndItem.startsWith('ocm-share/')
+    ) {
+      const [shareName, ...item] = driveAliasAndItem.split('/').slice(1)
+      const driveAliasPrefix = driveAliasAndItem.startsWith('ocm-share/') ? 'ocm-share' : 'share'
+
+      let shareIdStr = queryItemAsString(unref(shareId))
+      // keep compatibility with old share jail ids pre sharing NG
+      if (shareIdStr?.includes(':')) {
+        shareIdStr = [SHARE_JAIL_ID, shareIdStr].join('!')
       }
 
-      const resolvedSpace = unref(space)
-      // never latch onto the fallback: a deeper path may be covered by a real space that we
-      // either already hold or can still lazily load, so always re-resolve. For real spaces the
-      // shortcut is kept, but segment-aware: `eos/project/c/cern` must not swallow
-      // `eos/project/c/cernbox/x` (which would yield item `box/x` on the wrong space).
-      const isOnlyItemPathChanged =
-        !!resolvedSpace &&
-        !isFallbackSpaceResource(resolvedSpace) &&
-        isSegmentPrefix(driveAliasAndItem, resolvedSpace.driveAlias)
-      if (isOnlyItemPathChanged) {
-        item.value = urlJoin(driveAliasAndItem.slice(resolvedSpace.driveAlias.length), {
-          leadingSlash: true
+      matchingSpace =
+        spacesStore.getSpace(shareIdStr) ||
+        spacesStore.createShareSpace({
+          driveAliasPrefix,
+          id: shareIdStr,
+          shareName: unref(shareName)
+        })
+
+      path = item.join('/')
+    } else {
+      if (unref(fileId)) {
+        matchingSpace = unref(spaces).find((s) => {
+          return unref(fileId).startsWith(`${s.fileId}`)
         })
-        return
       }
 
-      let matchingSpace = null
-      let path = null
-      if (driveAliasAndItem.startsWith('public/') || driveAliasAndItem.startsWith('ocm/')) {
-        const [publicLinkToken, ...item] = driveAliasAndItem.split('/').slice(1)
-        matchingSpace = unref(spaces).find((s) => s.id === publicLinkToken)
-        path = item.join('/')
-      } else if (
-        driveAliasAndItem.startsWith('share/') ||
-        driveAliasAndItem.startsWith('ocm-share/')
-      ) {
-        const [shareName, ...item] = driveAliasAndItem.split('/').slice(1)
-        const driveAliasPrefix = driveAliasAndItem.startsWith('ocm-share/') ? 'ocm-share' : 'share'
-
-        let shareIdStr = queryItemAsString(unref(shareId))
-        // keep compatibility with old share jail ids pre sharing NG
-        if (shareIdStr?.includes(':')) {
-          shareIdStr = [SHARE_JAIL_ID, shareIdStr].join('!')
-        }
+      // real spaces are fetched per drive type on demand, cheapest first. Try what we already
+      // hold, then load one type at a time and retry, so a location is never attributed to the
+      // catch-all fallback just because its real space hadn't been fetched yet.
+      if (!matchingSpace) {
+        matchingSpace = getSpaceByDriveAliasAndItem(driveAliasAndItem, { includeFallback: false })
+      }
 
-        matchingSpace =
-          spacesStore.getSpace(shareIdStr) ||
-          spacesStore.createShareSpace({
-            driveAliasPrefix,
-            id: shareIdStr,
-            shareName: unref(shareName)
-          })
-
-        path = item.join('/')
-      } else {
-        if (unref(fileId)) {
-          matchingSpace = unref(spaces).find((s) => {
-            return unref(fileId).startsWith(`${s.fileId}`)
-          })
+      for (const driveType of LOADABLE_DRIVE_TYPES) {
+        if (matchingSpace || spacesStore.initializedTypes[driveType]) {
+          continue
         }
-
-        // 1. real spaces we already know about
-        if (!matchingSpace) {
-          matchingSpace = getSpaceByDriveAliasAndItem(driveAliasAndItem, { includeFallback: false })
+        // mount points only ever contribute an owner-path shaped driveAlias (and are expensive
+        // to fetch), so they can't change the outcome unless full share owner paths are on
+        if (driveType === 'mountpoint' && !configStore.options.routing.fullShareOwnerPaths) {
+          continue
         }
 
-        // 2. the location may live in a received share whose owner-path root space hasn't been
-        //    fetched yet. Fetching mount points is expensive, so only once per session and only
-        //    when it can actually produce a matching driveAlias.
-        if (
-          !matchingSpace &&
-          !spacesStore.mountPointsInitialized &&
-          configStore.options.routing.fullShareOwnerPaths
-        ) {
-          loading.value = true
-          await spacesStore.loadMountPoints({ graphClient: clientService.graphAuthenticated })
-          matchingSpace = getSpaceByDriveAliasAndItem(driveAliasAndItem, { includeFallback: false })
-        }
+        loading.value = true
+        await spacesStore.loadSpacesByType(driveType, {
+          graphClient: clientService.graphAuthenticated
+        })
+        matchingSpace = getSpaceByDriveAliasAndItem(driveAliasAndItem, { includeFallback: false })
+      }
 
-        // 3. last resort: the synthetic catch-all space, if this deployment has one
-        if (!matchingSpace) {
-          matchingSpace = getSpaceByDriveAliasAndItem(driveAliasAndItem)
-        }
+      // last resort: the synthetic catch-all space, if this deployment has one
+      if (!matchingSpace) {
+        matchingSpace = getSpaceByDriveAliasAndItem(driveAliasAndItem)
+      }
 
-        if (matchingSpace) {
-          path = driveAliasAndItem.slice(matchingSpace.driveAlias.length)
-        }
+      if (matchingSpace) {
+        path = driveAliasAndItem.slice(matchingSpace.driveAlias.length)
+      }
+    }
+    space.value = matchingSpace
+    item.value = urlJoin(path, {
+      leadingSlash: true
+    })
+  }
+
+  watch(
+    [options.driveAliasAndItem, areSpacesLoading],
+    async ([driveAliasAndItem, areSpacesLoading], [driveAliasAndItemOld, areSpacesLoadingOld]) => {
+      if (driveAliasAndItem === driveAliasAndItemOld && areSpacesLoading === areSpacesLoadingOld) {
+        return
+      }
+
+      // `loading` decides whether consumers have a usable file context at all, so it has to be
+      // reset on every exit. An early return or a failing drive request would otherwise leave the
+      // app stuck on a loading screen for the rest of the session.
+      try {
+        await resolve(driveAliasAndItem)
+      } finally {
+        loading.value = false
       }
-      space.value = matchingSpace
-      item.value = urlJoin(path, {
-        leadingSlash: true
-      })
-      loading.value = false
     },
     { immediate: true, deep: true }
   )