fix(files): update loading indicator behavior during folder navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

apps/files/src/components/VirtualList.vue

@@ -5,7 +5,10 @@
 <template>
 	<div
 		class="files-list"
-		:class="{ 'files-list--grid': gridMode }"
+		:class="{
+			'files-list--grid': gridMode,
+			'files-list--loading': loading,
+		}"
 		data-cy-files-list
 		@scroll.passive="onScroll">
 		<!-- Header -->
@@ -18,13 +21,12 @@
 		</div>
 
 		<div
-			v-if="dataSources.length === 0 || loading"
+			v-if="dataSources.length === 0"
 			class="files-list__empty">
 			<slot name="empty" />
 		</div>
 
 		<table
-			v-if="!loading"
 			:aria-hidden="dataSources.length === 0"
 			:inert="dataSources.length === 0"
 			class="files-list__table"
@@ -447,3 +449,10 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style scoped>
+.files-list--loading {
+	opacity: 0.3;
+}
+</style>
+

apps/files/src/views/FilesList.vue

@@ -90,7 +90,7 @@
 		<FilesListVirtual
 			v-else
 			ref="filesListVirtual"
-			:loading="loading && !isRefreshing"
+			:loading="loading"
 			:current-folder="currentFolder"
 			:current-view="currentView"
 			:nodes="dirContentsSorted"
@@ -99,7 +99,6 @@
 				<!-- Initial loading -->
 				<NcLoadingIcon
 					v-if="loading && !isRefreshing"
-					data-cy-files-loading
 					class="files-list__loading-icon"
 					:size="38"
 					:name="t('files', 'Loading current folder')" />
@@ -313,7 +312,6 @@ export default defineComponent({
 
 			loading: true,
 			loadingAction: null as string | null,
-			changingLocation: false,
 			error: null as string | null,
 			controller: new AbortController(),
 			promise: null as Promise<ContentsWithRoot> | null,
@@ -413,7 +411,6 @@ export default defineComponent({
 			return this.currentFolder !== undefined
 				&& !this.isEmptyDir
 				&& this.loading
-				&& !this.changingLocation
 		},
 
 		/**
@@ -480,14 +477,12 @@ export default defineComponent({
 			}
 
 			logger.debug('View changed', { newView, oldView })
-			this.changingLocation = true
 			this.selectionStore.reset()
 			this.fetchContent()
 		},
 
 		directory(newDir, oldDir) {
 			logger.debug('Directory changed', { newDir, oldDir })
-			this.changingLocation = true
 			// TODO: preserve selection on browsing?
 			this.selectionStore.reset()
 			this.sidebar.close()
@@ -614,7 +609,6 @@ export default defineComponent({
 				this.error = humanizeWebDAVError(error)
 			} finally {
 				this.loading = false
-				this.changingLocation = false
 			}
 		},
 

tests/playwright/e2e/files/files-navigation.spec.ts

@@ -48,46 +48,4 @@ test.describe('Files: Navigation', () => {
 		await expect(filesListPage.getRowForFile('baz')).toBeVisible()
 		await expect(filesListPage.getRowForFile('baz')).toBeActiveRow()
 	})
-
-	test('show loading indicator when navigating', async ({ page, filesListPage }) => {
-		await filesListPage.navigateToFolder('foo/bar/baz')
-		await expect(page.locator('[data-cy-files-list-row-fileid]')).toHaveCount(0)
-
-		// Block the PROPFIND request to simulate a slow network and show the loading indicator
-		let releaseNavigation!: () => void
-		const navigationBlocked = new Promise<void>((resolve) => {
-			releaseNavigation = resolve
-		})
-		let blockedNavigationRequest = false
-		await page.route(/remote\.php\/dav\/files\//, async (route) => {
-			const request = route.request()
-			if (!blockedNavigationRequest && request.method() === 'PROPFIND' && request.url().includes('/foo/bar')) {
-				blockedNavigationRequest = true
-				await navigationBlocked
-			}
-
-			await route.continue()
-		})
-
-		// Navigate back to the parent folder — the PROPFIND request will be blocked
-		const navigationResponse = page.waitForResponse((response) => response.url().includes('/remote.php/dav/files/')
-			&& response.request().method() === 'PROPFIND'
-			&& response.url().includes('/foo/bar'))
-
-		await page.goBack()
-
-		await expect.poll(() => new URL(page.url()).searchParams.get('dir')).toBe('/foo/bar')
-		await expect(page.locator('[data-cy-files-loading]')).toBeVisible()
-		expect(blockedNavigationRequest).toBe(true)
-
-		// Release the blocked navigation request and wait for it to complete
-		releaseNavigation()
-		await navigationResponse
-		await page.unroute(/remote\.php\/dav\/files\//)
-
-		// Wait for the loading indicator to disappear and the folder to be rendered
-		await expect(page.locator('[data-cy-files-loading]')).not.toBeVisible()
-		await expect(filesListPage.getRowForFile('baz')).toBeVisible()
-		await expect(filesListPage.getRowForFile('baz')).toBeActiveRow()
-	})
 })