fix: wait for the sidebar resource before rendering the shares panel

packages/web-app-files/src/components/SideBar/Shares/SharesPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading list of shares')" />
+    <oc-loader v-if="sharesLoading || !resource" :aria-label="$gettext('Loading list of shares')" />
     <template v-else>
       <space-members v-if="showSpaceMembers" class="px-2 py-2" />
       <file-shares v-else class="px-2 py-2" />
@@ -14,13 +14,19 @@ import FileLinks from './FileLinks.vue'
 import FileShares from './FileShares.vue'
 import SpaceMembers from './SpaceMembers.vue'
 import { useSharesStore } from '@opencloud-eu/web-pkg'
+import { Resource } from '@opencloud-eu/web-client'
 import { storeToRefs } from 'pinia'
+import { inject, Ref } from 'vue'
 
 const { showSpaceMembers = false, showLinks = false } = defineProps<{
   showSpaceMembers?: boolean
   showLinks?: boolean
 }>()
 
+// the sidebar resource is null while it is still loading, e.g. when the space's
+// permissions are fetched first, and the panels below require it
+const resource = inject<Ref<Resource>>('resource')
+
 const sharesStore = useSharesStore()
 const { loading: sharesLoading } = storeToRefs(sharesStore)
 </script>

packages/web-app-files/tests/unit/components/SideBar/Shares/SharesPanel.spec.ts

@@ -1,5 +1,6 @@
 import SharesPanel from '../../../../../src/components/SideBar/Shares/SharesPanel.vue'
 import { defaultPlugins, shallowMount } from '@opencloud-eu/web-test-helpers'
+import { ref } from 'vue'
 
 const ocLoaderStubSelector = 'oc-loader-stub'
 
@@ -21,16 +22,26 @@ describe('SharesPanel', () => {
     })
   })
 
-  function getWrapper({ sharesLoading = false } = {}) {
+  describe('when the sidebar resource is not loaded yet', () => {
+    it('should show the oc loader instead of the panels', () => {
+      const { wrapper } = getWrapper({ resource: null, showSpaceMembers: true })
+      expect(wrapper.find(ocLoaderStubSelector).exists()).toBeTruthy()
+      expect(wrapper.find('space-members-stub').exists()).toBeFalsy()
+    })
+  })
+
+  function getWrapper({ sharesLoading = false, resource = {}, showSpaceMembers = false } = {}) {
     return {
       wrapper: shallowMount(SharesPanel, {
+        props: { showSpaceMembers },
         global: {
           plugins: [
             ...defaultPlugins({ piniaOptions: { sharesState: { loading: sharesLoading } } })
           ],
           provide: {
             displayedItem: {},
             displayedSpace: {},
+            resource: ref(resource),
             spaceMembers: { value: [] }
           }
         }