fix: render loading state before loading before loading starts

owncloud · Jul 27, 2022 · 34fc8ab · 34fc8ab
1 parent d9e6a33
commit 34fc8ab
Show file tree

Hide file tree

Showing 21 changed files with 35 additions and 24 deletions.
diff --git a/changelog/unreleased/bugfix-loading-state-in-views 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,7 +21,7 @@ const propsData = {
   active: false,
   target: exampleNavItem.route.path,
   icon: exampleNavItem.icon,
-  index: 5,
+  index: '5',
   id: '123'
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                 $_fileActions_triggerDefaultAction: noop
               }
             }
-          ]
+          ],
+          setup: () => ({
+            areResourcesLoading: false
+          })
         }
       )
@@ Expand Down @@