fix: sidebar versions loading (performance)

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -27,7 +27,11 @@
         <oc-status-indicators :resource="resource" :indicators="shareIndicators" />
         <p class="my-0 mx-2" v-text="detailSharingInformation" />
       </div>
+      <div v-if="detailsLoading" class="flex justify-center">
+        <oc-spinner :aria-label="$gettext('Loading details')" />
+      </div>
       <dl
+        v-else
         class="details-list grid grid-cols-[auto_minmax(0,1fr)] m-0"
         :aria-label="$gettext('Overview of the information about the selected file')"
       >
@@ -179,6 +183,7 @@ const { user } = storeToRefs(userStore)
 
 const resource = inject<Ref<Resource>>('resource')
 const versions = inject<Ref<Resource[]>>('versions')
+const versionsLoading = inject<Ref<boolean>>('versionsLoading')
 const space = inject<Ref<SpaceResource>>('space')
 
 const preview = ref<string>(undefined)
@@ -187,6 +192,7 @@ const authStore = useAuthStore()
 const { publicLinkContextReady } = storeToRefs(authStore)
 
 const isPreviewLoading = computed(() => previewEnabled && unref(previewsLoading))
+const detailsLoading = computed(() => unref(versionsLoading))
 
 const sharedAncestor = computed(() => {
   return Object.values(unref(ancestorMetaData)).find(

packages/web-pkg/src/components/SideBar/FileSideBar.vue

@@ -111,10 +111,10 @@ export default defineComponent({
 
     const { selectedResources } = useSelectedResources()
 
-    const isMetaDataLoading = ref(false)
+    const sharesLoading = ref(false)
 
     const isLoading = computed(() => {
-      return unref(isMetaDataLoading) || loadVersionsTask.isRunning
+      return unref(sharesLoading)
     })
 
     const panelContext = computed<SideBarPanelContext<SpaceResource, Resource, Resource>>(() => {
@@ -329,9 +329,10 @@ export default defineComponent({
       sharesStore.setLoading(false)
     }).restartable()
 
+    const currentResourceMtime = ref<string>() // used to check if we need to load new versions
     watch(
       () => [...unref(panelContext).items, props.isOpen],
-      async () => {
+      async (newValue, oldValue) => {
         if (unref(panelContext).items?.length !== 1) {
           return
         }
@@ -341,7 +342,15 @@ export default defineComponent({
           return
         }
 
+        const res1 = newValue?.[0] as Resource
+        const res2 = oldValue?.[0] as Resource
+        if (res1?.id === res2?.id && res1?.mdate === unref(currentResourceMtime)) {
+          // don't load versions if the content of the resource didn't change
+          return
+        }
+
         const resource = unref(panelContext).items[0]
+        currentResourceMtime.value = resource.mdate
 
         if (loadVersionsTask.isRunning) {
           loadVersionsTask.cancelAll()
@@ -376,7 +385,7 @@ export default defineComponent({
         }
 
         const resource = unref(panelContext).items[0]
-        isMetaDataLoading.value = true
+        sharesLoading.value = true
 
         if (isProjectSpaceResource(resource)) {
           await spacesStore.loadGraphPermissions({
@@ -399,7 +408,7 @@ export default defineComponent({
 
         if (!unref(isShareLocation)) {
           loadedResource.value = resource
-          isMetaDataLoading.value = false
+          sharesLoading.value = false
           return
         }
 
@@ -420,7 +429,7 @@ export default defineComponent({
           loadedResource.value = resource
           console.error(error)
         }
-        isMetaDataLoading.value = false
+        sharesLoading.value = false
       },
       {
         deep: true,
@@ -440,6 +449,10 @@ export default defineComponent({
     )
     provide('availableInternalShareRoles', readonly(availableInternalShareRoles))
     provide('availableExternalShareRoles', readonly(availableExternalShareRoles))
+    provide(
+      'versionsLoading',
+      computed(() => loadVersionsTask.isRunning)
+    )
 
     return {
       loadedResource,