From fc237c65066b80721392742651520b951e69f185 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 14:08:51 +0200
Subject: [PATCH 01/11] Centrelize version loading

---
 .../SideBar/Details/FileDetails.vue           | 34 ++-----------------
 .../SideBar/Versions/FileVersions.vue         | 21 ++----------
 .../src/components/SideBar/FileSideBar.vue    | 16 +++++++++
 3 files changed, 20 insertions(+), 51 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index b371f85d458..53df38e792f 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -174,18 +174,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    },
-    versionsEnabled: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {
     const configStore = useConfigStore()
     const userStore = useUserStore()
     const capabilityStore = useCapabilityStore()
-    const clientService = useClientService()
     const { getMatchingSpace } = useGetMatchingSpace()
 
     const language = useGettext()
@@ -196,6 +190,8 @@ export default defineComponent({
     const { user } = storeToRefs(userStore)
 
     const resource = inject<Ref<Resource>>('resource')
+    const versions = inject<Ref<Resource[]>>('versions')
+    console.log(versions)
     const space = inject<Ref<SpaceResource>>('space')
 
     const previewService = usePreviewService()
@@ -204,15 +200,6 @@ export default defineComponent({
     const authStore = useAuthStore()
     const { publicLinkContextReady } = storeToRefs(authStore)
 
-    const versions = ref<Resource[]>([])
-    const loadVersions = async (fileId: Resource['fileId']) => {
-      try {
-        versions.value = await clientService.webdav.listFileVersions(fileId)
-      } catch (e) {
-        console.error(e)
-      }
-    }
-
     const isPreviewEnabled = computed(() => {
       if (unref(resource).isFolder) {
         return false
@@ -261,23 +248,6 @@ export default defineComponent({
       return formatRelativeDateFromJSDate(new Date(date), language.current)
     }
 
-    watch(
-      resource,
-      () => {
-        if (unref(resource)) {
-          loadPreviewTask.perform(unref(resource))
-          if (
-            props.versionsEnabled &&
-            !unref(resource).isFolder &&
-            !unref(publicLinkContextReady)
-          ) {
-            loadVersions(unref(resource).fileId)
-          }
-        }
-      },
-      { immediate: true }
-    )
-
     const contextualHelper = {
       isEnabled: configStore.options.contextHelpers,
       data: tagsHelper({ configStore })
diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index 220b1b5b4ee..577784c700d 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="oc-file-versions-sidebar" class="-oc-mt-s">
-    <oc-loader v-if="areVersionsLoading" />
-    <ul v-else-if="versions.length" class="oc-m-rm oc-position-relative">
+    <ul v-if="versions.length" class="oc-m-rm oc-position-relative">
       <li class="spacer oc-pb-l" aria-hidden="true"></li>
       <li
         v-for="(item, index) in versions"
@@ -85,8 +84,8 @@ export default defineComponent({
 
     const space = inject<Ref<SpaceResource>>('space')
     const resource = inject<Ref<Resource>>('resource')
+    const versions = inject<Ref<SpaceResource>>('versions')
 
-    const versions = ref<Resource[]>([])
     const fetchVersionsTask = useTask(function* () {
       try {
         versions.value = yield clientService.webdav.listFileVersions(unref(resource).fileId)
@@ -94,21 +93,6 @@ export default defineComponent({
         console.error(e)
       }
     })
-    const areVersionsLoading = computed(() => {
-      return !fetchVersionsTask.last || fetchVersionsTask.isRunning
-    })
-    watch(
-      [() => unref(resource)?.id, () => unref(resource)?.etag],
-      ([id, etag]) => {
-        if (!id || !etag) {
-          return
-        }
-        fetchVersionsTask.perform()
-      },
-      {
-        immediate: true
-      }
-    )
 
     const isRevertible = computed(() => {
       if (props.isReadOnly) {
@@ -158,7 +142,6 @@ export default defineComponent({
       space,
       resource,
       versions,
-      areVersionsLoading,
       isRevertible,
       revertToVersion,
       downloadVersion,
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 5b1e636c665..871a2c96f89 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -110,12 +110,16 @@ export default defineComponent({
     const { currentFolder } = storeToRefs(resourcesStore)
 
     const loadedResource = ref<Resource>()
+    const versions = ref<Resource>([])
+
     const isLoading = ref(false)
 
     const availableShareRoles = ref<ShareRole[]>([])
 
     const { selectedResources } = useSelectedResources()
 
+    provide('versions', versions)
+
     const panelContext = computed<SideBarPanelContext<SpaceResource, Resource, Resource>>(() => {
       if (unref(selectedResources).length === 0) {
         return {
@@ -196,6 +200,10 @@ export default defineComponent({
         .map((e) => e.panel)
     )
 
+    const loadVersionsTask = useTask(function* (signal, resource: Resource) {
+      versions.value = yield clientService.webdav.listFileVersions(resource.id)
+    })
+
     const loadSharesTask = useTask(function* (signal, resource: Resource) {
       sharesStore.setLoading(true)
       sharesStore.removeOrphanedShares()
@@ -359,6 +367,14 @@ export default defineComponent({
               loadSharesTask.cancelAll()
             }
 
+            if (loadVersionsTask.isRunning) {
+              loadVersionsTask.cancelAll()
+            }
+
+            if (!resource.isFolder) {
+              loadVersionsTask.perform(resource)
+            }
+
             loadSharesTask.perform(resource)
           } catch (e) {
             console.error(e)

From 6faaf504f364b6ae2fab40fe629e290d4edc26f6 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 14:32:32 +0200
Subject: [PATCH 02/11] Add second watcher, to declutter code

---
 .../SideBar/Details/FileDetails.vue           |  4 +-
 .../SideBar/Versions/FileVersions.vue         | 18 +-----
 .../src/components/SideBar/FileSideBar.vue    | 56 +++++++++++++------
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 53df38e792f..a69d81bf3f9 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -129,14 +129,13 @@
 </template>
 <script lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, defineComponent, inject, Ref, ref, unref, watch } from 'vue'
+import { computed, defineComponent, inject, Ref, ref, unref } from 'vue'
 import {
   ImageDimension,
   useAuthStore,
   useUserStore,
   useCapabilityStore,
   useConfigStore,
-  useClientService,
   useResourcesStore,
   formatDateFromJSDate
 } from '@ownclouders/web-pkg'
@@ -191,7 +190,6 @@ export default defineComponent({
 
     const resource = inject<Ref<Resource>>('resource')
     const versions = inject<Ref<Resource[]>>('versions')
-    console.log(versions)
     const space = inject<Ref<SpaceResource>>('space')
 
     const previewService = usePreviewService()
diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index 577784c700d..9230425e1c3 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -62,9 +62,8 @@ import {
   useDownloadFile,
   useResourcesStore
 } from '@ownclouders/web-pkg'
-import { computed, defineComponent, inject, Ref, ref, unref, watch } from 'vue'
+import { computed, defineComponent, inject, Ref, unref } from 'vue'
 import { isShareSpaceResource, Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
-import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
@@ -86,14 +85,6 @@ export default defineComponent({
     const resource = inject<Ref<Resource>>('resource')
     const versions = inject<Ref<SpaceResource>>('versions')
 
-    const fetchVersionsTask = useTask(function* () {
-      try {
-        versions.value = yield clientService.webdav.listFileVersions(unref(resource).fileId)
-      } catch (e) {
-        console.error(e)
-      }
-    })
-
     const isRevertible = computed(() => {
       if (props.isReadOnly) {
         return false
@@ -122,8 +113,6 @@ export default defineComponent({
           })
         }
       }
-
-      fetchVersionsTask.perform()
     }
     const downloadVersion = (version: Resource) => {
       return downloadFile(unref(space), unref(resource), version.name)
@@ -147,10 +136,7 @@ export default defineComponent({
       downloadVersion,
       formatVersionDateRelative,
       formatVersionDate,
-      formatVersionFileSize,
-
-      // HACK: exported for unit tests
-      fetchVersionsTask
+      formatVersionFileSize
     }
   }
 })
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 871a2c96f89..32f9f6e21b9 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -112,13 +112,16 @@ export default defineComponent({
     const loadedResource = ref<Resource>()
     const versions = ref<Resource>([])
 
-    const isLoading = ref(false)
-
     const availableShareRoles = ref<ShareRole[]>([])
 
     const { selectedResources } = useSelectedResources()
 
-    provide('versions', versions)
+    const isMetaDataLoading = ref(false)
+    const isVersionsLoading = ref(false)
+
+    const isLoading = computed(() => {
+      return unref(isMetaDataLoading) || unref(isVersionsLoading)
+    })
 
     const panelContext = computed<SideBarPanelContext<SpaceResource, Resource, Resource>>(() => {
       if (unref(selectedResources).length === 0) {
@@ -342,6 +345,34 @@ export default defineComponent({
       sharesStore.setLoading(false)
     }).restartable()
 
+    watch(
+      () => [...unref(panelContext).items, props.isOpen],
+      async () => {
+        if (unref(panelContext).items?.length !== 1) {
+          // don't load additional metadata for empty or multi-select contexts
+          return
+        }
+
+        const resource = unref(panelContext).items[0]
+
+        if (loadVersionsTask.isRunning) {
+          loadVersionsTask.cancelAll()
+        }
+
+        if (!resource.isFolder) {
+          try {
+            isVersionsLoading.value = true
+            await loadVersionsTask.perform(resource)
+          } catch (e) {
+            console.error(e)
+          } finally {
+            isVersionsLoading.value = false
+          }
+        }
+      },
+      { deep: true, immediate: true }
+    )
+
     watch(
       () => [...unref(panelContext).items, props.isOpen],
       async () => {
@@ -360,21 +391,13 @@ export default defineComponent({
           return
         }
 
-        isLoading.value = true
+        isMetaDataLoading.value = true
         if (!unref(isPublicFilesLocation) && !unref(isTrashLocation)) {
           try {
             if (loadSharesTask.isRunning) {
               loadSharesTask.cancelAll()
             }
 
-            if (loadVersionsTask.isRunning) {
-              loadVersionsTask.cancelAll()
-            }
-
-            if (!resource.isFolder) {
-              loadVersionsTask.perform(resource)
-            }
-
             loadSharesTask.perform(resource)
           } catch (e) {
             console.error(e)
@@ -383,7 +406,7 @@ export default defineComponent({
 
         if (!unref(isShareLocation)) {
           loadedResource.value = resource
-          isLoading.value = false
+          isMetaDataLoading.value = false
           return
         }
 
@@ -400,12 +423,13 @@ export default defineComponent({
           loadedResource.value = resource
           console.error(error)
         }
-        isLoading.value = false
+        isMetaDataLoading.value = false
       },
       { deep: true, immediate: true }
     )
 
     provide('resource', readonly(loadedResource))
+    provide('versions', readonly(versions))
     provide(
       'space',
       computed(() => props.space)
@@ -424,9 +448,9 @@ export default defineComponent({
       focusSideBar,
       panelContext,
       availablePanels,
-      isLoading,
       isFileHeaderVisible,
-      isSpaceHeaderVisible
+      isSpaceHeaderVisible,
+      isLoading
     }
   }
 })

From 6deee607d9a1636f67724a6b9ca9fa09e85b02f6 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 14:43:02 +0200
Subject: [PATCH 03/11] Fix unit tests

---
 .../SideBar/Details/FileDetails.vue           | 12 ++++-
 .../ResourceDetails.spec.ts.snap              | 50 -------------------
 .../SideBar/Details/FileDetails.spec.ts       |  2 +-
 3 files changed, 12 insertions(+), 52 deletions(-)
 delete mode 100644 packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index a69d81bf3f9..721cfa55d76 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -129,7 +129,7 @@
 </template>
 <script lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, defineComponent, inject, Ref, ref, unref } from 'vue'
+import { computed, defineComponent, inject, Ref, ref, unref, watch } from 'vue'
 import {
   ImageDimension,
   useAuthStore,
@@ -264,6 +264,16 @@ export default defineComponent({
       return upperFirst(displayDate)
     })
 
+    watch(
+      resource,
+      () => {
+        if (unref(resource)) {
+          loadPreviewTask.perform(unref(resource))
+        }
+      },
+      { immediate: true }
+    )
+
     return {
       user,
       preview,
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
deleted file mode 100644
index e050560eae0..00000000000
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
+++ /dev/null
@@ -1,50 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ResourceDetails component > renders resource details correctly 1`] = `
-"<div class="resource-details oc-flex oc-flex-column oc-flex-middle">
-  <div class="oc-width-1-3@l oc-width-1-2@m oc-width-3-4">
-    <div class="file_info oc-flex oc-flex-between oc-p-s">
-      <div class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder file_info__icon oc-mr-s oc-position-relative"><!----></span>
-        <div class="file_info__body oc-text-overflow">
-          <h3 data-testid="files-info-name" class="oc-font-semibold"><span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg"><span class="oc-resource-basename oc-text-break">image.jpg</span>
-            <!--v-if--></span>
-          </h3>
-        </div>
-      </div>
-    </div>
-    <div data-v-5080a6a4="" id="oc-file-details-sidebar" class="oc-mb">
-      <div data-v-5080a6a4="">
-        <div data-v-5080a6a4="" class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb"><span data-v-5080a6a4="" class="oc-icon oc-icon-xxxl oc-icon-passive oc-resource-icon oc-resource-icon-folder details-icon"><!----></span></div>
-        <!--v-if-->
-        <table data-v-5080a6a4="" class="details-table oc-width-1-1" aria-label="Overview of the information about the selected file">
-          <col data-v-5080a6a4="" class="oc-width-1-3">
-          <col data-v-5080a6a4="" class="oc-width-2-3">
-          <!--v-if-->
-          <tr data-v-5080a6a4="" data-testid="timestamp">
-            <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Last modified</th>
-            <td data-v-5080a6a4=""><span data-v-5080a6a4="">Oct 21, 2015, 7:28 AM</span></td>
-          </tr>
-          <!--v-if-->
-          <!--v-if-->
-          <!--v-if-->
-          <tr data-v-5080a6a4="" data-testid="ownerDisplayName">
-            <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Owner</th>
-            <td data-v-5080a6a4="">
-              <p data-v-5080a6a4="" class="oc-m-rm">admin <span data-v-5080a6a4="" data-msgid="(me)" data-current-language="en">(me)</span></p>
-            </td>
-          </tr>
-          <tr data-v-5080a6a4="" data-testid="sizeInfo">
-            <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Size</th>
-            <td data-v-5080a6a4="">24 kB</td>
-          </tr>
-          <!--v-if-->
-          <!--v-if-->
-          <portal-target data-v-5080a6a4="" name="app.files.sidebar.file.details.table" slot-props="[object Object]" multiple="true"></portal-target>
-          <!--v-if-->
-        </table>
-      </div>
-    </div>
-    <ul class="oc-list oc-my-rm oc-mx-rm oc-mt-s" id="oc-files-actions-sidebar"></ul>
-  </div>
-</div>"
-`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts
index e6fa3a17c63..07eb2fc0987 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts
@@ -207,7 +207,6 @@ function createWrapper({
   const publicLocation = createLocationPublic('files-public-link')
   const currentRoute = isPublicLinkContext ? publicLocation : spacesLocation
   const mocks = defaultComponentMocks({ currentRoute: mock<RouteLocation>(currentRoute as any) })
-  mocks.$clientService.webdav.listFileVersions.mockResolvedValue(versions)
   const capabilities = { files: { tags: tagsEnabled } }
   return {
     wrapper: mount(FileDetails, {
@@ -215,6 +214,7 @@ function createWrapper({
         stubs: { 'router-link': true, 'resource-icon': true },
         provide: {
           ...mocks,
+          versions,
           resource,
           space: mockDeep<SpaceResource>()
         },

From 55a044bee89a467d580d22dfbcb9282260e4e9d7 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 14:50:28 +0200
Subject: [PATCH 04/11] Add more checks if we want to load versions

---
 .../web-pkg/src/components/SideBar/FileSideBar.vue     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 32f9f6e21b9..b30b5f74a97 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -359,7 +359,15 @@ export default defineComponent({
           loadVersionsTask.cancelAll()
         }
 
-        if (!resource.isFolder) {
+        if (
+          !resource.isFolder &&
+          !isProjectSpaceResource(resource) &&
+          !unref(isPublicFilesLocation) &&
+          !unref(isTrashLocation) &&
+          !unref(isSharedWithMeLocation) &&
+          !unref(isSharedWithOthersLocation) &&
+          !unref(isSharedViaLinkLocation)
+        ) {
           try {
             isVersionsLoading.value = true
             await loadVersionsTask.perform(resource)

From 15ff7130375d574af466400d1a9c399e5b7cc5a9 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 15:23:29 +0200
Subject: [PATCH 05/11] Fix unit tests

---
 .../FilesList/ResourceDetails.spec.ts         |   4 +-
 .../ResourceDetails.spec.ts.snap              |  50 ++++++
 .../SideBar/Versions/FileVersions.spec.ts     | 167 +++++++-----------
 .../src/components/SideBar/FileSideBar.vue    |   3 +-
 4 files changed, 119 insertions(+), 105 deletions(-)
 create mode 100644 packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceDetails.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceDetails.spec.ts
index 78365067494..885b9558a80 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceDetails.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceDetails.spec.ts
@@ -46,7 +46,6 @@ describe('ResourceDetails component', () => {
         })
       })
     }
-    mocks.$clientService.webdav.listFileVersions.mockResolvedValue([])
 
     const file = {
       id: '0',
@@ -76,7 +75,8 @@ describe('ResourceDetails component', () => {
           provide: {
             ...mocks,
             space,
-            resource: file
+            resource: file,
+            versions: []
           }
         }
       })
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
new file mode 100644
index 00000000000..e050560eae0
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
@@ -0,0 +1,50 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ResourceDetails component > renders resource details correctly 1`] = `
+"<div class="resource-details oc-flex oc-flex-column oc-flex-middle">
+  <div class="oc-width-1-3@l oc-width-1-2@m oc-width-3-4">
+    <div class="file_info oc-flex oc-flex-between oc-p-s">
+      <div class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder file_info__icon oc-mr-s oc-position-relative"><!----></span>
+        <div class="file_info__body oc-text-overflow">
+          <h3 data-testid="files-info-name" class="oc-font-semibold"><span class="oc-resource-name oc-display-inline-block" data-test-resource-name="image.jpg" title="image.jpg"><span class="oc-resource-basename oc-text-break">image.jpg</span>
+            <!--v-if--></span>
+          </h3>
+        </div>
+      </div>
+    </div>
+    <div data-v-5080a6a4="" id="oc-file-details-sidebar" class="oc-mb">
+      <div data-v-5080a6a4="">
+        <div data-v-5080a6a4="" class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center oc-mb"><span data-v-5080a6a4="" class="oc-icon oc-icon-xxxl oc-icon-passive oc-resource-icon oc-resource-icon-folder details-icon"><!----></span></div>
+        <!--v-if-->
+        <table data-v-5080a6a4="" class="details-table oc-width-1-1" aria-label="Overview of the information about the selected file">
+          <col data-v-5080a6a4="" class="oc-width-1-3">
+          <col data-v-5080a6a4="" class="oc-width-2-3">
+          <!--v-if-->
+          <tr data-v-5080a6a4="" data-testid="timestamp">
+            <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Last modified</th>
+            <td data-v-5080a6a4=""><span data-v-5080a6a4="">Oct 21, 2015, 7:28 AM</span></td>
+          </tr>
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+          <tr data-v-5080a6a4="" data-testid="ownerDisplayName">
+            <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Owner</th>
+            <td data-v-5080a6a4="">
+              <p data-v-5080a6a4="" class="oc-m-rm">admin <span data-v-5080a6a4="" data-msgid="(me)" data-current-language="en">(me)</span></p>
+            </td>
+          </tr>
+          <tr data-v-5080a6a4="" data-testid="sizeInfo">
+            <th data-v-5080a6a4="" scope="col" class="oc-pr-s oc-font-semibold">Size</th>
+            <td data-v-5080a6a4="">24 kB</td>
+          </tr>
+          <!--v-if-->
+          <!--v-if-->
+          <portal-target data-v-5080a6a4="" name="app.files.sidebar.file.details.table" slot-props="[object Object]" multiple="true"></portal-target>
+          <!--v-if-->
+        </table>
+      </div>
+    </div>
+    <ul class="oc-list oc-my-rm oc-mx-rm oc-mt-s" id="oc-files-actions-sidebar"></ul>
+  </div>
+</div>"
+`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Versions/FileVersions.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Versions/FileVersions.spec.ts
index 725548739c6..d85a88cc0f2 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Versions/FileVersions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Versions/FileVersions.spec.ts
@@ -47,113 +47,77 @@ const selectors = {
 }
 
 describe('FileVersions', () => {
-  describe('versions are loading', () => {
-    const { wrapper } = getMountedWrapper({
-      mountType: shallowMount,
-      loadingStateDelay: 500
-    })
-
-    it('should show oc loader component', () => {
-      expect(wrapper.find(loadingStubSelector).exists()).toBeTruthy()
-    })
-
-    it('should not show versions list', () => {
-      expect(wrapper.find(versionTableStubSelector).exists()).toBeFalsy()
-    })
+  it('should show no versions message if there are no versions', async () => {
+    const { wrapper } = getMountedWrapper({ mountType: shallowMount, versions: [] })
+    const noVersionsMessageElement = wrapper.find(selectors.noVersionsMessage)
 
-    it('should not show no versions message', () => {
-      expect(wrapper.find(selectors.noVersionsMessage).exists()).toBeFalsy()
-    })
+    expect(noVersionsMessageElement.text()).toBe('No Versions available for this file')
   })
 
-  describe('versions are loaded', () => {
-    it('should not show oc loader component', async () => {
-      const { wrapper } = getMountedWrapper({ mountType: shallowMount })
-      await wrapper.vm.fetchVersionsTask.last
-      await wrapper.vm.$nextTick()
-      expect(wrapper.find(loadingStubSelector).exists()).toBeFalsy()
-    })
+  describe('when the file has versions', () => {
+    describe('versions list', () => {
+      it('should show last modified date of each version', async () => {
+        const { wrapper } = getMountedWrapper({ mountType: shallowMount })
+        const dateElement = wrapper.findAll(selectors.lastModifiedDate)
 
-    it('should show no versions message if there are no versions', async () => {
-      const { wrapper } = getMountedWrapper({ mountType: shallowMount, versions: [] })
-      await wrapper.vm.fetchVersionsTask.last
-      const noVersionsMessageElement = wrapper.find(selectors.noVersionsMessage)
+        expect(dateElement.length).toBe(2)
+        expect(dateElement.at(0).text()).toBe('1 day ago')
+        expect(dateElement.at(1).text()).toBe('7 days ago')
+      })
+      it('should show content length of each version', async () => {
+        const { wrapper } = getMountedWrapper({ mountType: shallowMount })
+        const contentLengthElement = wrapper.findAll(selectors.resourceSize)
 
-      expect(noVersionsMessageElement.text()).toBe('No Versions available for this file')
-    })
+        expect(contentLengthElement.length).toBe(2)
+        expect(contentLengthElement.at(0).text()).toBe('23 B')
+        expect(contentLengthElement.at(1).text()).toBe('11 B')
+      })
+      describe('row actions', () => {
+        describe('reverting to a specific version', () => {
+          it('should be possible for a non-share', async () => {
+            const { wrapper } = getMountedWrapper()
+            const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
+            expect(revertVersionButton.length).toBe(defaultVersions.length)
+          })
+          it('should be possible for a share with write permissions', async () => {
+            const resource = mockDeep<ShareResource>({ permissions: DavPermission.Updateable })
+            const space = mockDeep<ShareSpaceResource>({ driveType: 'share' })
+            const { wrapper } = getMountedWrapper({ resource, space })
+            const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
+            expect(revertVersionButton.length).toBe(defaultVersions.length)
+          })
+          it('should not be possible for a share with read-only permissions', async () => {
+            const resource = mockDeep<ShareResource>({ permissions: '' })
+            const space = mockDeep<ShareSpaceResource>({ driveType: 'share' })
+            const { wrapper } = getMountedWrapper({ resource, space })
+            const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
+            expect(revertVersionButton.length).toBe(0)
+          })
+          it('should call UPDATE_RESOURCE_FIELD mutation when revert button is clicked', async () => {
+            const { wrapper } = getMountedWrapper()
+            const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
+            const { updateResourceField } = useResourcesStore()
 
-    describe('when the file has versions', () => {
-      describe('versions list', () => {
-        it('should show last modified date of each version', async () => {
-          const { wrapper } = getMountedWrapper({ mountType: shallowMount })
-          await wrapper.vm.fetchVersionsTask.last
-          const dateElement = wrapper.findAll(selectors.lastModifiedDate)
+            expect(revertVersionButton.length).toBe(defaultVersions.length)
+            expect(updateResourceField).not.toHaveBeenCalled()
 
-          expect(dateElement.length).toBe(2)
-          expect(dateElement.at(0).text()).toBe('1 day ago')
-          expect(dateElement.at(1).text()).toBe('7 days ago')
-        })
-        it('should show content length of each version', async () => {
-          const { wrapper } = getMountedWrapper({ mountType: shallowMount })
-          await wrapper.vm.fetchVersionsTask.last
-          const contentLengthElement = wrapper.findAll(selectors.resourceSize)
-
-          expect(contentLengthElement.length).toBe(2)
-          expect(contentLengthElement.at(0).text()).toBe('23 B')
-          expect(contentLengthElement.at(1).text()).toBe('11 B')
-        })
-        describe('row actions', () => {
-          describe('reverting to a specific version', () => {
-            it('should be possible for a non-share', async () => {
-              const { wrapper } = getMountedWrapper()
-              await wrapper.vm.fetchVersionsTask.last
-              const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
-              expect(revertVersionButton.length).toBe(defaultVersions.length)
-            })
-            it('should be possible for a share with write permissions', async () => {
-              const resource = mockDeep<ShareResource>({ permissions: DavPermission.Updateable })
-              const space = mockDeep<ShareSpaceResource>({ driveType: 'share' })
-              const { wrapper } = getMountedWrapper({ resource, space })
-              await wrapper.vm.fetchVersionsTask.last
-              const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
-              expect(revertVersionButton.length).toBe(defaultVersions.length)
-            })
-            it('should not be possible for a share with read-only permissions', async () => {
-              const resource = mockDeep<ShareResource>({ permissions: '' })
-              const space = mockDeep<ShareSpaceResource>({ driveType: 'share' })
-              const { wrapper } = getMountedWrapper({ resource, space })
-              await wrapper.vm.fetchVersionsTask.last
-              const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
-              expect(revertVersionButton.length).toBe(0)
-            })
-            it('should call UPDATE_RESOURCE_FIELD mutation when revert button is clicked', async () => {
-              const { wrapper } = getMountedWrapper()
-              await wrapper.vm.fetchVersionsTask.last
-              const revertVersionButton = wrapper.findAll(selectors.revertVersionButton)
-              const { updateResourceField } = useResourcesStore()
-
-              expect(revertVersionButton.length).toBe(defaultVersions.length)
-              expect(updateResourceField).not.toHaveBeenCalled()
-
-              await revertVersionButton.at(0).trigger('click')
-              await wrapper.vm.$nextTick()
-
-              expect(updateResourceField).toHaveBeenCalledTimes(2)
-            })
+            await revertVersionButton.at(0).trigger('click')
+            await wrapper.vm.$nextTick()
+
+            expect(updateResourceField).toHaveBeenCalledTimes(2)
           })
+        })
 
-          it('should call downloadFile method when download version button is clicked', async () => {
-            const { wrapper, mocks } = getMountedWrapper()
-            await wrapper.vm.fetchVersionsTask.last
-            const downloadVersionButton = wrapper.findAll(selectors.downloadVersionButton)
+        it('should call downloadFile method when download version button is clicked', async () => {
+          const { wrapper, mocks } = getMountedWrapper()
+          const downloadVersionButton = wrapper.findAll(selectors.downloadVersionButton)
 
-            expect(downloadVersionButton.length).toBe(defaultVersions.length)
-            expect(mocks.downloadFile).not.toHaveBeenCalled()
+          expect(downloadVersionButton.length).toBe(defaultVersions.length)
+          expect(mocks.downloadFile).not.toHaveBeenCalled()
 
-            await downloadVersionButton.at(0).trigger('click')
+          await downloadVersionButton.at(0).trigger('click')
 
-            expect(mocks.downloadFile).toHaveBeenCalledTimes(1)
-          })
+          expect(mocks.downloadFile).toHaveBeenCalledTimes(1)
         })
       })
     })
@@ -174,19 +138,18 @@ function getMountedWrapper({
     downloadFile
   }
   mocks.$clientService.webdav.getFileInfo.mockResolvedValue(mock<Resource>({ id: '1' }))
-  mocks.$clientService.webdav.listFileVersions.mockImplementation(() => {
-    if (loadingStateDelay > 0) {
-      return new Promise((res) => setTimeout(() => res(versions), loadingStateDelay))
-    }
-    return new Promise((res) => res(versions))
-  })
 
   return {
     wrapper: mountType(FileVersions, {
       global: {
         mocks,
         renderStubDefaultSlot: true,
-        provide: { space: computed(() => space), resource: computed(() => resource), ...mocks },
+        provide: {
+          space: computed(() => space),
+          resource: computed(() => resource),
+          versions: computed(() => versions),
+          ...mocks
+        },
         stubs: {
           ...defaultStubs,
           'oc-td': true,
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index b30b5f74a97..6d3655bf524 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -63,6 +63,7 @@ import {
   CollaboratorShare,
   LinkShare,
   ShareRole,
+  isIncomingShareResource,
   call,
   isSpaceResource
 } from '@ownclouders/web-client/src/helpers'
@@ -362,9 +363,9 @@ export default defineComponent({
         if (
           !resource.isFolder &&
           !isProjectSpaceResource(resource) &&
+          !isIncomingShareResource(resource) &&
           !unref(isPublicFilesLocation) &&
           !unref(isTrashLocation) &&
-          !unref(isSharedWithMeLocation) &&
           !unref(isSharedWithOthersLocation) &&
           !unref(isSharedViaLinkLocation)
         ) {

From 92dc75fb21e50530aae64c77da064a98fc2e1a5b Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 18:29:35 +0200
Subject: [PATCH 06/11] Fix types

---
 .../src/components/SideBar/Versions/FileVersions.vue            | 2 +-
 packages/web-pkg/src/components/SideBar/FileSideBar.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index 9230425e1c3..513ab2de7c1 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -83,7 +83,7 @@ export default defineComponent({
 
     const space = inject<Ref<SpaceResource>>('space')
     const resource = inject<Ref<Resource>>('resource')
-    const versions = inject<Ref<SpaceResource>>('versions')
+    const versions = inject<Ref<Resource[]>>('versions')
 
     const isRevertible = computed(() => {
       if (props.isReadOnly) {
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 6d3655bf524..8f361d0435f 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -111,7 +111,7 @@ export default defineComponent({
     const { currentFolder } = storeToRefs(resourcesStore)
 
     const loadedResource = ref<Resource>()
-    const versions = ref<Resource>([])
+    const versions = ref<Resource[]>([])
 
     const availableShareRoles = ref<ShareRole[]>([])
 

From bd38fe046f8136c104c7af2cc669af4f4f1bc89c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 18:36:18 +0200
Subject: [PATCH 07/11] Fix don't show versions in shared resources

---
 .../src/composables/extensions/useFileSideBars.ts           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
index 28b9a284bdb..1b5583cf96e 100644
--- a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
@@ -22,6 +22,7 @@ import {
   useCapabilityStore
 } from '@ownclouders/web-pkg'
 import {
+  isIncomingShareResource,
   isProjectSpaceResource,
   isShareResource,
   isShareSpaceResource,
@@ -227,7 +228,10 @@ export const useSideBarPanels = () => {
               }
               if (
                 isLocationTrashActive(router, 'files-trash-generic') ||
-                isLocationPublicActive(router, 'files-public-link')
+                isLocationPublicActive(router, 'files-public-link') ||
+                isLocationSharesActive(router, 'files-shares-with-others') ||
+                isLocationSharesActive(router, 'files-shares-via-link') ||
+                isIncomingShareResource(items[0])
               ) {
                 return false
               }

From e0dbce52380bd5753306d4b663f07819c92ccb0d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 18:42:11 +0200
Subject: [PATCH 08/11] Add changelog item

---
 ...ix-versions-loaded-multiple-times-when-opening-sidebar | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 changelog/unreleased/bugfix-versions-loaded-multiple-times-when-opening-sidebar

diff --git a/changelog/unreleased/bugfix-versions-loaded-multiple-times-when-opening-sidebar b/changelog/unreleased/bugfix-versions-loaded-multiple-times-when-opening-sidebar
new file mode 100644
index 00000000000..4c7dcc0b64d
--- /dev/null
+++ b/changelog/unreleased/bugfix-versions-loaded-multiple-times-when-opening-sidebar
@@ -0,0 +1,8 @@
+Bugfix: Versions loaded multiple times when opening sidebar
+
+We've fixed a bug, where the versions endpoint was fetched multiple times when the sidebar was opened
+and therefore added unnecessary load to the server.
+
+https://github.com/owncloud/web/pull/10746
+https://github.com/owncloud/web/issues/10381
+https://github.com/owncloud/web/issues/10619

From ea9547ff3477a9a74279b5aede7aede4c05b1a07 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 8 Apr 2024 23:16:12 +0200
Subject: [PATCH 09/11] React on code review

---
 packages/web-pkg/src/components/SideBar/FileSideBar.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 8f361d0435f..869f05481a9 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -118,10 +118,9 @@ export default defineComponent({
     const { selectedResources } = useSelectedResources()
 
     const isMetaDataLoading = ref(false)
-    const isVersionsLoading = ref(false)
 
     const isLoading = computed(() => {
-      return unref(isMetaDataLoading) || unref(isVersionsLoading)
+      return unref(isMetaDataLoading) || loadVersionsTask.isRunning
     })
 
     const panelContext = computed<SideBarPanelContext<SpaceResource, Resource, Resource>>(() => {
@@ -370,12 +369,9 @@ export default defineComponent({
           !unref(isSharedViaLinkLocation)
         ) {
           try {
-            isVersionsLoading.value = true
             await loadVersionsTask.perform(resource)
           } catch (e) {
             console.error(e)
-          } finally {
-            isVersionsLoading.value = false
           }
         }
       },

From 99f616d273ddd1ad1106671eb2acd52480a5a71d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 9 Apr 2024 13:39:52 +0200
Subject: [PATCH 10/11] React on code review

---
 .../composables/extensions/useFileSideBars.ts |  6 +--
 .../src/components/SideBar/FileSideBar.vue    | 47 ++++++++-----------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
index 1b5583cf96e..597bc0be7bf 100644
--- a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
@@ -26,6 +26,7 @@ import {
   isProjectSpaceResource,
   isShareResource,
   isShareSpaceResource,
+  isSpaceResource,
   SpaceResource
 } from '@ownclouders/web-client/src/helpers'
 import { Resource } from '@ownclouders/web-client'
@@ -229,9 +230,8 @@ export const useSideBarPanels = () => {
               if (
                 isLocationTrashActive(router, 'files-trash-generic') ||
                 isLocationPublicActive(router, 'files-public-link') ||
-                isLocationSharesActive(router, 'files-shares-with-others') ||
-                isLocationSharesActive(router, 'files-shares-via-link') ||
-                isIncomingShareResource(items[0])
+                isIncomingShareResource(items[0]) ||
+                isSpaceResource(items[0])
               ) {
                 return false
               }
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 869f05481a9..34849724926 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -345,52 +345,42 @@ export default defineComponent({
       sharesStore.setLoading(false)
     }).restartable()
 
+    const loadVersions = (resource: Resource) => {
+      return (
+        !resource.isFolder &&
+        !isSpaceResource(resource) &&
+        !isIncomingShareResource(resource) &&
+        !unref(isPublicFilesLocation) &&
+        !unref(isTrashLocation)
+      )
+    }
+
     watch(
       () => [...unref(panelContext).items, props.isOpen],
       async () => {
+        if (!props.isOpen) {
+          sharesStore.pruneShares()
+          loadedResource.value = null
+          return
+        }
         if (unref(panelContext).items?.length !== 1) {
           // don't load additional metadata for empty or multi-select contexts
           return
         }
-
         const resource = unref(panelContext).items[0]
 
         if (loadVersionsTask.isRunning) {
           loadVersionsTask.cancelAll()
         }
 
-        if (
-          !resource.isFolder &&
-          !isProjectSpaceResource(resource) &&
-          !isIncomingShareResource(resource) &&
-          !unref(isPublicFilesLocation) &&
-          !unref(isTrashLocation) &&
-          !unref(isSharedWithOthersLocation) &&
-          !unref(isSharedViaLinkLocation)
-        ) {
+        if (loadVersions(resource)) {
           try {
             await loadVersionsTask.perform(resource)
           } catch (e) {
             console.error(e)
           }
         }
-      },
-      { deep: true, immediate: true }
-    )
 
-    watch(
-      () => [...unref(panelContext).items, props.isOpen],
-      async () => {
-        if (!props.isOpen) {
-          sharesStore.pruneShares()
-          loadedResource.value = null
-          return
-        }
-        if (unref(panelContext).items?.length !== 1) {
-          // don't load additional metadata for empty or multi-select contexts
-          return
-        }
-        const resource = unref(panelContext).items[0]
         if (unref(loadedResource)?.id === resource.id) {
           // current resource is already loaded
           return
@@ -430,7 +420,10 @@ export default defineComponent({
         }
         isMetaDataLoading.value = false
       },
-      { deep: true, immediate: true }
+      {
+        deep: true,
+        immediate: true
+      }
     )
 
     provide('resource', readonly(loadedResource))

From 38b8e7435d520f63f233853e816722538800a8d1 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 9 Apr 2024 14:42:37 +0200
Subject: [PATCH 11/11] Add second watcher, to declutter code

---
 .../src/components/SideBar/FileSideBar.vue    | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 34849724926..5fbf1a2898d 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -345,26 +345,10 @@ export default defineComponent({
       sharesStore.setLoading(false)
     }).restartable()
 
-    const loadVersions = (resource: Resource) => {
-      return (
-        !resource.isFolder &&
-        !isSpaceResource(resource) &&
-        !isIncomingShareResource(resource) &&
-        !unref(isPublicFilesLocation) &&
-        !unref(isTrashLocation)
-      )
-    }
-
     watch(
       () => [...unref(panelContext).items, props.isOpen],
       async () => {
-        if (!props.isOpen) {
-          sharesStore.pruneShares()
-          loadedResource.value = null
-          return
-        }
         if (unref(panelContext).items?.length !== 1) {
-          // don't load additional metadata for empty or multi-select contexts
           return
         }
         const resource = unref(panelContext).items[0]
@@ -373,13 +357,36 @@ export default defineComponent({
           loadVersionsTask.cancelAll()
         }
 
-        if (loadVersions(resource)) {
+        if (
+          !resource.isFolder &&
+          !isSpaceResource(resource) &&
+          !isIncomingShareResource(resource) &&
+          !unref(isPublicFilesLocation) &&
+          !unref(isTrashLocation)
+        ) {
           try {
             await loadVersionsTask.perform(resource)
           } catch (e) {
             console.error(e)
           }
         }
+      },
+      { immediate: true, deep: true }
+    )
+
+    watch(
+      () => [...unref(panelContext).items, props.isOpen],
+      async () => {
+        if (!props.isOpen) {
+          sharesStore.pruneShares()
+          loadedResource.value = null
+          return
+        }
+        if (unref(panelContext).items?.length !== 1) {
+          // don't load additional metadata for empty or multi-select contexts
+          return
+        }
+        const resource = unref(panelContext).items[0]
 
         if (unref(loadedResource)?.id === resource.id) {
           // current resource is already loaded