From 34fc8ab7561902bdc85ab64bc457b8419510d69e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 25 Jul 2022 11:38:45 +0200
Subject: [PATCH 1/3] fix: render loading state before loading before loading
 starts

---
 changelog/unreleased/bugfix-loading-state-in-views     |  5 +++++
 packages/web-app-files/src/components/TrashBin.vue     |  2 +-
 .../resourcesViewDefaults/useResourcesViewDefaults.ts  |  5 +++++
 packages/web-app-files/src/views/Favorites.vue         |  2 +-
 packages/web-app-files/src/views/Personal.vue          |  2 +-
 packages/web-app-files/src/views/PublicFiles.vue       |  2 +-
 .../web-app-files/src/views/shares/SharedResource.vue  |  2 +-
 .../web-app-files/src/views/shares/SharedViaLink.vue   |  2 +-
 .../web-app-files/src/views/shares/SharedWithMe.vue    | 10 ++++------
 .../src/views/shares/SharedWithOthers.vue              |  2 +-
 packages/web-app-files/src/views/spaces/Project.vue    |  2 +-
 packages/web-app-files/src/views/spaces/Projects.vue   |  2 +-
 .../tests/unit/components/TrashBin.spec.js             |  2 +-
 .../web-app-files/tests/unit/views/Favorites.spec.js   |  2 +-
 .../web-app-files/tests/unit/views/Personal.spec.js    |  2 +-
 .../web-app-files/tests/unit/views/PublicFiles.spec.ts |  2 +-
 .../tests/unit/views/shares/SharedViaLink.spec.js      |  2 +-
 .../tests/unit/views/shares/SharedWithMe.spec.js       |  2 +-
 .../tests/unit/views/shares/SharedWithOthers.spec.js   |  2 +-
 .../web-app-files/tests/unit/views/views.shared.ts     |  5 ++++-
 .../unit/components/SidebarNav/SidebarNavItem.spec.js  |  2 +-
 21 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-loading-state-in-views

diff --git a/changelog/unreleased/bugfix-loading-state-in-views b/changelog/unreleased/bugfix-loading-state-in-views
new file mode 100644
index 00000000000..1851d956bfe
--- /dev/null
+++ b/changelog/unreleased/bugfix-loading-state-in-views
@@ -0,0 +1,5 @@
+Bugfix: Loading state in views
+
+We fixed a small glitch in views of the files app, where the view would show a state like "Resource not found" in the brief moment before the resource loading started. Now the views correctly start in a loading state.
+
+https://github.com/owncloud/web/pull/7325
diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
index c70a225e020..ad50be85a89 100644
--- a/packages/web-app-files/src/components/TrashBin.vue
+++ b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <no-content-message
         v-if="isEmpty"
diff --git a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
index f0bc9033ad8..85485b48dd9 100644
--- a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
+++ b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
@@ -24,6 +24,7 @@ interface ResourcesViewDefaultsResult<T, TT, TU extends any[]> {
   fileListHeaderY: Ref<any>
   refreshFileListHeaderPosition(): void
   loadResourcesTask: Task<TT, TU>
+  areResourcesLoading: ComputedRef<boolean>
   storeItems: ComputedRef<T[]>
   fields: ComputedRef<SortField[]>
   paginatedResources: ComputedRef<T[]>
@@ -41,6 +42,9 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
   options: ResourcesViewDefaultsOptions<TT, TU> = {}
 ): ResourcesViewDefaultsResult<T, TT, TU> => {
   const loadResourcesTask = options.loadResourcesTask || folderService.getTask()
+  const areResourcesLoading = computed(() => {
+    return loadResourcesTask.isRunning || !loadResourcesTask.last
+  })
 
   const store = useStore()
   const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } = useFileListHeaderPosition()
@@ -84,6 +88,7 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
     fileListHeaderY,
     refreshFileListHeaderPosition,
     loadResourcesTask,
+    areResourcesLoading,
     storeItems,
     fields,
     paginatedResources,
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index ef14f1883aa..4936192dc92 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <app-bar />
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <no-content-message v-if="isEmpty" id="files-favorites-empty" class="files-empty" icon="star">
         <template #message>
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 6061c2896af..1860080d5d3 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -11,7 +11,7 @@
         <create-and-upload />
       </template>
     </app-bar>
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 149c9083d40..cf0bfb95acb 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -11,7 +11,7 @@
         <create-and-upload />
       </template>
     </app-bar>
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
index d0ecc8b84d2..f8b86bb18bd 100644
--- a/packages/web-app-files/src/views/shares/SharedResource.vue
+++ b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -11,7 +11,7 @@
         <create-and-upload />
       </template>
     </app-bar>
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index cdd416f66b1..dee5f217327 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <app-bar :has-shares-navigation="true" />
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <no-content-message
         v-if="isEmpty"
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 62f3cee9541..ee13e466d42 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex oc-flex-column">
     <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <!-- Pending shares -->
       <div v-if="hasPending">
@@ -210,11 +210,8 @@ export default defineComponent({
   ],
 
   setup() {
-    const { fileListHeaderY, storeItems, fields, loadResourcesTask } = useResourcesViewDefaults<
-      Resource,
-      any,
-      any[]
-    >()
+    const { fileListHeaderY, storeItems, fields, loadResourcesTask, areResourcesLoading } =
+      useResourcesViewDefaults<Resource, any, any[]>()
 
     const store = useStore()
     const hasShareJail = useCapabilityShareJailEnabled()
@@ -272,6 +269,7 @@ export default defineComponent({
       // defaults
       fileListHeaderY,
       loadResourcesTask,
+      areResourcesLoading,
 
       // view specific
       viewMode,
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 950b5750e5c..235fb51382b 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <app-bar :has-shares-navigation="true" />
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <no-content-message
         v-if="isEmpty"
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index aa0c998de79..d0639e2a5d1 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -11,7 +11,7 @@
         <create-and-upload />
       </template>
     </app-bar>
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <not-found-message v-if="!space.id" class="space-not-found oc-height-1-1" />
       <div v-else-if="isSpaceRoot">
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 01f18be2952..e92b871d507 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -14,7 +14,7 @@
         <p v-text="spacesHint" />
       </template>
     </app-bar>
-    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="areResourcesLoading" />
     <template v-else>
       <no-content-message
         v-if="!spaces.length"
diff --git a/packages/web-app-files/tests/unit/components/TrashBin.spec.js b/packages/web-app-files/tests/unit/components/TrashBin.spec.js
index 0acf184c8ed..828018a177d 100644
--- a/packages/web-app-files/tests/unit/components/TrashBin.spec.js
+++ b/packages/web-app-files/tests/unit/components/TrashBin.spec.js
@@ -163,8 +163,8 @@ describe('Trashbin component', () => {
         $router
       },
       setup: () => ({
+        areResourcesLoading: loading,
         loadResourcesTask: {
-          isRunning: loading,
           perform: jest.fn()
         },
         paginatedResources: paginatedResources,
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 7a568323d91..99f58b384d5 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -258,8 +258,8 @@ function mountOptions({
     stubs,
     router: new VueRouter({ routes }),
     setup: () => ({
+      areResourcesLoading: loading,
       loadResourcesTask: {
-        isRunning: loading,
         perform: jest.fn()
       },
       ...setup()
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index c377a6f735a..dfc8b45c877 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -152,8 +152,8 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
     setup: () => ({
       ...Personal.setup(),
       paginatedResources: [...resources],
+      areResourcesLoading: false,
       loadResourcesTask: {
-        isRunning: false,
         perform: jest.fn()
       },
       handleSort: jest.fn()
diff --git a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
index 67e114514d1..9bb1b1b03b1 100644
--- a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
+++ b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
@@ -216,8 +216,8 @@ describe('PublicFiles view', () => {
         breadcrumbs: () => []
       },
       setup: () => ({
+        areResourcesLoading: loading,
         loadResourcesTask: {
-          isRunning: loading,
           perform: jest.fn()
         },
         paginatedResources: paginatedResources,
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
index 983141138be..4c7a0c78389 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.js
@@ -170,8 +170,8 @@ function mountOptions(store, loading, setup = {}) {
       $router: router
     },
     setup: () => ({
+      areResourcesLoading: loading,
       loadResourcesTask: {
-        isRunning: loading,
         perform: jest.fn()
       },
       ...setup
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
index 37c0a03d165..e1c19b4cd41 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.js
@@ -208,8 +208,8 @@ function mountOptions({
       $router: getRouter({ query })
     },
     setup: () => ({
+      areResourcesLoading: loading,
       loadResourcesTask: {
-        isRunning: loading,
         perform: jest.fn()
       },
       handleSort: jest.fn()
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
index 39136200de9..f24bce6d413 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.js
@@ -213,8 +213,8 @@ describe('SharedWithOthers view', () => {
       mounted: jest.fn(),
       setup: () => ({
         ...SharedWithOthers.setup(),
+        areResourcesLoading: loading,
         loadResourcesTask: {
-          isRunning: loading,
           perform: jest.fn()
         },
         paginatedResources: paginatedResources,
diff --git a/packages/web-app-files/tests/unit/views/views.shared.ts b/packages/web-app-files/tests/unit/views/views.shared.ts
index adec8a5352d..3a1e322128c 100644
--- a/packages/web-app-files/tests/unit/views/views.shared.ts
+++ b/packages/web-app-files/tests/unit/views/views.shared.ts
@@ -89,7 +89,10 @@ export const accentuatesTableRowTest = async <V extends Vue>(
             $_fileActions_triggerDefaultAction: noop
           }
         }
-      ]
+      ],
+      setup: () => ({
+        areResourcesLoading: false
+      })
     }
   )
 
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js
index 9186824dfbe..abede740ea4 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNavItem.spec.js
@@ -21,7 +21,7 @@ const propsData = {
   active: false,
   target: exampleNavItem.route.path,
   icon: exampleNavItem.icon,
-  index: 5,
+  index: '5',
   id: '123'
 }
 

From eb816bdd291006465984280ae15ef890bf6517f4 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 25 Jul 2022 13:43:00 +0200
Subject: [PATCH 2/3] fix: add item param to personal space redirect

If the item is missing there's a warning in the browser console about
item not matching the required format.
---
 packages/web-app-files/src/views/Personal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 1860080d5d3..13595eb4d84 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -199,7 +199,7 @@ export default defineComponent({
 
           return this.$router.replace({
             to,
-            params: { ...to.params, storageId },
+            params: { ...to.params, storageId, item: '/' },
             query: to.query
           })
         }

From adea5221fd21b51079fa307d2bc8a656d6151d89 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 27 Jul 2022 12:48:43 +0200
Subject: [PATCH 3/3] fix: don't overwrite item in redirect

---
 packages/web-app-files/src/views/Personal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 13595eb4d84..ea3ae1bbc56 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -199,7 +199,7 @@ export default defineComponent({
 
           return this.$router.replace({
             to,
-            params: { ...to.params, storageId, item: '/' },
+            params: { ...to.params, storageId, item: to.params.item || this.homeFolder },
             query: to.query
           })
         }