From ab50d7dd12225f632807c72dc202896bc13c970c Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 11 Aug 2026 19:04:11 +0200
Subject: [PATCH 1/7] fix(files): update loading behavior when changing
 location

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 apps/files/src/components/FilesListVirtual.vue | 8 ++++++++
 apps/files/src/components/VirtualList.vue      | 8 +++++++-
 apps/files/src/views/FilesList.vue             | 8 ++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index ee212c5a9cb29..bb05cc2e2bb18 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -10,6 +10,9 @@
 		:data-sources="nodes"
 		:gridMode="userConfig.grid_view"
 		:extraProps="{
+		:loading="loading"
+		:grid-mode="userConfig.grid_view"
+		:extra-props="{
 			isMimeAvailable,
 			isMtimeAvailable,
 			isSizeAvailable,
@@ -118,6 +121,11 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
+
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup(props) {
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index fa38ac0eed0ee..8d07bd95943dd 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -18,12 +18,13 @@
 		</div>
 
 		<div
-			v-if="dataSources.length === 0"
+			v-if="dataSources.length === 0 || loading"
 			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"
@@ -123,6 +124,11 @@ export default defineComponent({
 			type: String,
 			default: '',
 		},
+
+		loading: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index c67cea3ae5138..6dadb32b7e9fd 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -92,6 +92,9 @@
 			ref="filesListVirtual"
 			:currentFolder
 			:currentView
+			:loading="loading && !isRefreshing"
+			:current-folder="currentFolder"
+			:current-view="currentView"
 			:nodes="dirContentsSorted"
 			:summary="summary">
 			<template #empty>
@@ -310,6 +313,7 @@ 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,
@@ -409,6 +413,7 @@ export default defineComponent({
 			return this.currentFolder !== undefined
 				&& !this.isEmptyDir
 				&& this.loading
+				&& !this.changingLocation
 		},
 
 		/**
@@ -475,12 +480,14 @@ 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()
@@ -607,6 +614,7 @@ export default defineComponent({
 				this.error = humanizeWebDAVError(error)
 			} finally {
 				this.loading = false
+				this.changingLocation = false
 			}
 		},
 

From 78a44bdd8c827c79e886612c8cfa1ef461e73270 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 24 Aug 2026 09:43:32 +0200
Subject: [PATCH 2/7] test(files): add test case for loading indicator during
 folder navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 apps/files/src/views/FilesList.vue            |  1 +
 .../e2e/files/files-navigation.spec.ts        | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 6dadb32b7e9fd..a801eb3a9350f 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -101,6 +101,7 @@
 				<!-- Initial loading -->
 				<NcLoadingIcon
 					v-if="loading && !isRefreshing"
+					data-cy-files-loading
 					class="files-list__loading-icon"
 					:size="38"
 					:name="t('files', 'Loading current folder')" />
diff --git a/tests/playwright/e2e/files/files-navigation.spec.ts b/tests/playwright/e2e/files/files-navigation.spec.ts
index b2114d00cd728..bf653e016e977 100644
--- a/tests/playwright/e2e/files/files-navigation.spec.ts
+++ b/tests/playwright/e2e/files/files-navigation.spec.ts
@@ -48,4 +48,46 @@ 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()
+	})
 })

From 61d9f71e6fdfbf4c21110bffbf137782a5b47386 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 1 Sep 2026 10:38:45 +0200
Subject: [PATCH 3/7] fix(files): update loading indicator behavior during
 folder navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 apps/files/src/components/VirtualList.vue     | 15 +++++--
 apps/files/src/views/FilesList.vue            |  7 +---
 .../e2e/files/files-navigation.spec.ts        | 42 -------------------
 3 files changed, 13 insertions(+), 51 deletions(-)

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 8d07bd95943dd..3c18b43f77a24 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/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>
+
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index a801eb3a9350f..6557fb281861f 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -93,6 +93,7 @@
 			:currentFolder
 			:currentView
 			:loading="loading && !isRefreshing"
+			:loading="loading"
 			:current-folder="currentFolder"
 			:current-view="currentView"
 			:nodes="dirContentsSorted"
@@ -101,7 +102,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')" />
@@ -314,7 +314,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,
@@ -414,7 +413,6 @@ export default defineComponent({
 			return this.currentFolder !== undefined
 				&& !this.isEmptyDir
 				&& this.loading
-				&& !this.changingLocation
 		},
 
 		/**
@@ -481,14 +479,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()
@@ -615,7 +611,6 @@ export default defineComponent({
 				this.error = humanizeWebDAVError(error)
 			} finally {
 				this.loading = false
-				this.changingLocation = false
 			}
 		},
 
diff --git a/tests/playwright/e2e/files/files-navigation.spec.ts b/tests/playwright/e2e/files/files-navigation.spec.ts
index bf653e016e977..b2114d00cd728 100644
--- a/tests/playwright/e2e/files/files-navigation.spec.ts
+++ b/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()
-	})
 })

From cb2a1e6e4c2feb13485f55de7a473c3e86422c96 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Thu, 10 Sep 2026 11:30:48 +0200
Subject: [PATCH 4/7] fix(files): adjust loading indicator style for improved
 visibility

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 apps/files/src/components/VirtualList.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 3c18b43f77a24..5d988212fce88 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -452,7 +452,8 @@ export default defineComponent({
 
 <style scoped>
 .files-list--loading {
-	opacity: 0.3;
+	filter: saturate(0);
+	opacity: 0.7;
 }
 </style>
 

From 325af212bbdda1f0d22be917eee2f2dd126433e8 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Fri, 9 Oct 2026 16:59:36 +0200
Subject: [PATCH 5/7] fix: resolve merge conflicts

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 apps/files/src/components/FilesListVirtual.vue | 4 +---
 apps/files/src/views/FilesList.vue             | 5 +----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index bb05cc2e2bb18..65a76033e2d56 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -8,11 +8,9 @@
 		:data-component="userConfig.grid_view ? FileEntryGrid : FileEntry"
 		data-key="source"
 		:data-sources="nodes"
+		:loading="loading"
 		:gridMode="userConfig.grid_view"
 		:extraProps="{
-		:loading="loading"
-		:grid-mode="userConfig.grid_view"
-		:extra-props="{
 			isMimeAvailable,
 			isMtimeAvailable,
 			isSizeAvailable,
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 6557fb281861f..bb5204d11e5d5 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -90,12 +90,9 @@
 		<FilesListVirtual
 			v-else
 			ref="filesListVirtual"
+			:loading="loading"
 			:currentFolder
 			:currentView
-			:loading="loading && !isRefreshing"
-			:loading="loading"
-			:current-folder="currentFolder"
-			:current-view="currentView"
 			:nodes="dirContentsSorted"
 			:summary="summary">
 			<template #empty>

From 3633816bdae6272df9941f3c0aa669ea56675373 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 19 Oct 2026 07:58:52 +0200
Subject: [PATCH 6/7] feat(files): implement loading skeleton during navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 .../files/src/components/FilesListVirtual.vue | 121 +++++++++++++++++-
 apps/files/src/components/VirtualList.vue     |  29 ++---
 apps/files/src/views/FilesList.vue            |   5 +-
 3 files changed, 135 insertions(+), 20 deletions(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 65a76033e2d56..8ebde9018ea6c 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -8,7 +8,7 @@
 		:data-component="userConfig.grid_view ? FileEntryGrid : FileEntry"
 		data-key="source"
 		:data-sources="nodes"
-		:loading="loading"
+		:navigating="navigating"
 		:gridMode="userConfig.grid_view"
 		:extraProps="{
 			isMimeAvailable,
@@ -48,6 +48,36 @@
 			<slot name="empty" />
 		</template>
 
+		<!-- Loading skeleton while navigating -->
+		<template #navigating>
+			<div class="files-list__loading-skeleton">
+				<!-- Skeleton rows -->
+				<div
+					v-for="index in 5"
+					:key="`skeleton-${index}`"
+					class="files-list__skeleton-row">
+					<!-- Checkbox skeleton -->
+					<div class="files-list__skeleton-checkbox" />
+					<!-- Icon skeleton -->
+					<div class="files-list__skeleton-icon" />
+					<!-- Name skeleton -->
+					<div class="files-list__skeleton-name" />
+					<!-- Additional columns skeleton -->
+					<template>
+						<div
+							v-if="isMimeAvailable"
+							class="files-list__skeleton-column" />
+						<div
+							v-if="isMtimeAvailable"
+							class="files-list__skeleton-column" />
+						<div
+							v-if="isSizeAvailable"
+							class="files-list__skeleton-column" />
+					</template>
+				</div>
+			</div>
+		</template>
+
 		<!-- Tfoot-->
 		<template #footer>
 			<FilesListTableFooter
@@ -120,7 +150,7 @@ export default defineComponent({
 			required: true,
 		},
 
-		loading: {
+		navigating: {
 			type: Boolean,
 			default: false,
 		},
@@ -584,6 +614,93 @@ export default defineComponent({
 			height: 100%;
 		}
 
+		// Loading skeleton
+		.files-list__loading-skeleton {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+		}
+
+		.files-list__skeleton-row {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			height: var(--row-height);
+			border-block-end: 1px solid var(--color-border);
+			box-sizing: border-box;
+			gap: 8px;
+			padding: 0 8px;
+		}
+
+		.files-list__skeleton-checkbox {
+			width: var(--checkbox-size);
+			height: var(--checkbox-size);
+			border-radius: 4px;
+			background: linear-gradient(
+				90deg,
+				var(--color-background-hover),
+				var(--color-main-background),
+				var(--color-background-hover)
+			);
+			background-size: 200% 100%;
+			animation: skeleton-loading 1.5s infinite;
+			flex-shrink: 0;
+		}
+
+		.files-list__skeleton-icon {
+			width: 24px;
+			height: 24px;
+			border-radius: 4px;
+			background: linear-gradient(
+				90deg,
+				var(--color-background-hover),
+				var(--color-main-background),
+				var(--color-background-hover)
+			);
+			background-size: 200% 100%;
+			animation: skeleton-loading 1.5s infinite;
+			flex-shrink: 0;
+		}
+
+		.files-list__skeleton-name {
+			flex: 1 1 auto;
+			height: 20px;
+			border-radius: 4px;
+			background: linear-gradient(
+				90deg,
+				var(--color-background-hover),
+				var(--color-main-background),
+				var(--color-background-hover)
+			);
+			background-size: 200% 100%;
+			animation: skeleton-loading 1.5s infinite;
+			min-width: 100px;
+		}
+
+		.files-list__skeleton-column {
+			width: calc(var(--row-height) * 1.5);
+			height: 20px;
+			border-radius: 4px;
+			background: linear-gradient(
+				90deg,
+				var(--color-background-hover),
+				var(--color-main-background),
+				var(--color-background-hover)
+			);
+			background-size: 200% 100%;
+			animation: skeleton-loading 1.5s infinite;
+			flex-shrink: 0;
+		}
+
+		@keyframes skeleton-loading {
+			0% {
+				background-position: 200% 0;
+			}
+			100% {
+				background-position: -200% 0;
+			}
+		}
+
 		tr {
 			position: relative;
 			display: flex;
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 5d988212fce88..f902aa4c1a326 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -5,10 +5,7 @@
 <template>
 	<div
 		class="files-list"
-		:class="{
-			'files-list--grid': gridMode,
-			'files-list--loading': loading,
-		}"
+		:class="{ 'files-list--grid': gridMode }"
 		data-cy-files-list
 		@scroll.passive="onScroll">
 		<!-- Header -->
@@ -21,17 +18,23 @@
 		</div>
 
 		<div
-			v-if="dataSources.length === 0"
+			v-if="navigating"
+			class="files-list__navigating">
+			<slot name="navigating" />
+		</div>
+
+		<div
+			v-else-if="dataSources.length === 0"
 			class="files-list__empty">
 			<slot name="empty" />
 		</div>
 
 		<table
-			:aria-hidden="dataSources.length === 0"
-			:inert="dataSources.length === 0"
+			:aria-hidden="navigating || dataSources.length === 0"
+			:inert="navigating || dataSources.length === 0"
 			class="files-list__table"
 			:class="{
-				'files-list__table--hidden': dataSources.length === 0,
+				'files-list__table--hidden': navigating || dataSources.length === 0,
 			}">
 			<!-- Accessibility table caption for screen readers -->
 			<caption v-if="caption" class="hidden-visually">
@@ -127,7 +130,7 @@ export default defineComponent({
 			default: '',
 		},
 
-		loading: {
+		navigating: {
 			type: Boolean,
 			default: false,
 		},
@@ -449,11 +452,3 @@ export default defineComponent({
 	},
 })
 </script>
-
-<style scoped>
-.files-list--loading {
-	filter: saturate(0);
-	opacity: 0.7;
-}
-</style>
-
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index bb5204d11e5d5..fffbba3e3865b 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -90,7 +90,7 @@
 		<FilesListVirtual
 			v-else
 			ref="filesListVirtual"
-			:loading="loading"
+			:navigating="navigating"
 			:currentFolder
 			:currentView
 			:nodes="dirContentsSorted"
@@ -311,6 +311,7 @@ export default defineComponent({
 
 			loading: true,
 			loadingAction: null as string | null,
+			navigating: false,
 			error: null as string | null,
 			controller: new AbortController(),
 			promise: null as Promise<ContentsWithRoot> | null,
@@ -476,6 +477,7 @@ export default defineComponent({
 			}
 
 			logger.debug('View changed', { newView, oldView })
+			this.navigating = true
 			this.selectionStore.reset()
 			this.fetchContent()
 		},
@@ -608,6 +610,7 @@ export default defineComponent({
 				this.error = humanizeWebDAVError(error)
 			} finally {
 				this.loading = false
+				this.navigating = false
 			}
 		},
 

From c2a0c4d2f406959daf2d517b363da4cc14d499bd Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 26 Oct 2026 15:41:35 +0100
Subject: [PATCH 7/7] feat(files): adjust loading skeleton during navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 .../files/src/components/FilesListVirtual.vue | 51 +++++--------------
 apps/files/src/components/VirtualList.vue     | 22 ++++----
 2 files changed, 24 insertions(+), 49 deletions(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 8ebde9018ea6c..04e410f3f289c 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -62,18 +62,6 @@
 					<div class="files-list__skeleton-icon" />
 					<!-- Name skeleton -->
 					<div class="files-list__skeleton-name" />
-					<!-- Additional columns skeleton -->
-					<template>
-						<div
-							v-if="isMimeAvailable"
-							class="files-list__skeleton-column" />
-						<div
-							v-if="isMtimeAvailable"
-							class="files-list__skeleton-column" />
-						<div
-							v-if="isSizeAvailable"
-							class="files-list__skeleton-column" />
-					</template>
 				</div>
 			</div>
 		</template>
@@ -638,12 +626,12 @@ export default defineComponent({
 			border-radius: 4px;
 			background: linear-gradient(
 				90deg,
-				var(--color-background-hover),
-				var(--color-main-background),
-				var(--color-background-hover)
+				var(--color-placeholder-light),
+				var(--color-placeholder-dark),
+				var(--color-placeholder-light)
 			);
 			background-size: 200% 100%;
-			animation: skeleton-loading 1.5s infinite;
+			animation: skeleton-loading 3.5s infinite;
 			flex-shrink: 0;
 		}
 
@@ -653,12 +641,12 @@ export default defineComponent({
 			border-radius: 4px;
 			background: linear-gradient(
 				90deg,
-				var(--color-background-hover),
-				var(--color-main-background),
-				var(--color-background-hover)
+				var(--color-placeholder-light),
+				var(--color-placeholder-dark),
+				var(--color-placeholder-light)
 			);
 			background-size: 200% 100%;
-			animation: skeleton-loading 1.5s infinite;
+			animation: skeleton-loading 3.5s infinite;
 			flex-shrink: 0;
 		}
 
@@ -668,30 +656,15 @@ export default defineComponent({
 			border-radius: 4px;
 			background: linear-gradient(
 				90deg,
-				var(--color-background-hover),
-				var(--color-main-background),
-				var(--color-background-hover)
+				var(--color-placeholder-light),
+				var(--color-placeholder-dark),
+				var(--color-placeholder-light)
 			);
 			background-size: 200% 100%;
-			animation: skeleton-loading 1.5s infinite;
+			animation: skeleton-loading 3.5s infinite;
 			min-width: 100px;
 		}
 
-		.files-list__skeleton-column {
-			width: calc(var(--row-height) * 1.5);
-			height: 20px;
-			border-radius: 4px;
-			background: linear-gradient(
-				90deg,
-				var(--color-background-hover),
-				var(--color-main-background),
-				var(--color-background-hover)
-			);
-			background-size: 200% 100%;
-			animation: skeleton-loading 1.5s infinite;
-			flex-shrink: 0;
-		}
-
 		@keyframes skeleton-loading {
 			0% {
 				background-position: 200% 0;
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index f902aa4c1a326..0831b5be3221d 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -18,23 +18,17 @@
 		</div>
 
 		<div
-			v-if="navigating"
-			class="files-list__navigating">
-			<slot name="navigating" />
-		</div>
-
-		<div
-			v-else-if="dataSources.length === 0"
+			v-if="!navigating && dataSources.length === 0"
 			class="files-list__empty">
 			<slot name="empty" />
 		</div>
 
 		<table
-			:aria-hidden="navigating || dataSources.length === 0"
-			:inert="navigating || dataSources.length === 0"
+			:aria-hidden="dataSources.length === 0 && !navigating"
+			:inert="dataSources.length === 0 && !navigating"
 			class="files-list__table"
 			:class="{
-				'files-list__table--hidden': navigating || dataSources.length === 0,
+				'files-list__table--hidden': dataSources.length === 0 && !navigating,
 			}">
 			<!-- Accessibility table caption for screen readers -->
 			<caption v-if="caption" class="hidden-visually">
@@ -48,6 +42,7 @@
 
 			<!-- Body -->
 			<tbody
+				v-if="!navigating"
 				:style="tbodyStyle"
 				class="files-list__tbody"
 				data-cy-files-list-tbody>
@@ -62,12 +57,19 @@
 
 			<!-- Footer -->
 			<tfoot
+				v-if="!navigating"
 				ref="footer"
 				class="files-list__tfoot"
 				data-cy-files-list-tfoot>
 				<slot name="footer" />
 			</tfoot>
 		</table>
+
+		<div
+			v-if="navigating"
+			class="files-list__navigating">
+			<slot name="navigating" />
+		</div>
 	</div>
 </template>