[full-ci] fix: render loading state before loading starts

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

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"

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,

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>

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
@@ -199,7 +199,7 @@ export default defineComponent({
 
           return this.$router.replace({
             to,
-            params: { ...to.params, storageId },
+            params: { ...to.params, storageId, item: to.params.item || this.homeFolder },
             query: to.query
           })
         }

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

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

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"

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,

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"

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">

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"

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,

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()

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()

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,

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

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()

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,

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
+      })
     }
   )
 

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'
 }