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

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

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index d58772a32d6b7..3502f7bd7c800 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -118,6 +118,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 cb2cd0f7a493f..2f54728297b77 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 372516756af3e..48a2b01ad0f78 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -311,6 +311,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,
@@ -410,6 +411,7 @@ export default defineComponent({
 			return this.currentFolder !== undefined
 				&& !this.isEmptyDir
 				&& this.loading
+				&& !this.changingLocation
 		},
 
 		/**
@@ -476,12 +478,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()
@@ -608,6 +612,7 @@ export default defineComponent({
 				this.error = humanizeWebDAVError(error)
 			} finally {
 				this.loading = false
+				this.changingLocation = false
 			}
 		},
 

From 8bfbe81e49ad27005d28819e97dec27b01aaafd0 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 24 Aug 2026 09:43:32 +0200
Subject: [PATCH 02/10] 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 48a2b01ad0f78..546f124c2587b 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -98,6 +98,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 d01407c6d54bf5e3c0fc625bfb1caaa381863d5c Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 1 Sep 2026 10:38:45 +0200
Subject: [PATCH 03/10] 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            |  6 ---
 .../e2e/files/files-navigation.spec.ts        | 42 -------------------
 3 files changed, 12 insertions(+), 51 deletions(-)

diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 2f54728297b77..0a7dfcbf6dd10 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 546f124c2587b..372516756af3e 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -98,7 +98,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')" />
@@ -312,7 +311,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,
@@ -412,7 +410,6 @@ export default defineComponent({
 			return this.currentFolder !== undefined
 				&& !this.isEmptyDir
 				&& this.loading
-				&& !this.changingLocation
 		},
 
 		/**
@@ -479,14 +476,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()
@@ -613,7 +608,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 c1223b9de1d26d1264388b1bafd93ce7e4bad5df Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Thu, 10 Sep 2026 11:30:48 +0200
Subject: [PATCH 04/10] 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 0a7dfcbf6dd10..62d3fcbf38d79 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 ab464e683987b76d85be3b335481dc027ae88644 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Fri, 9 Oct 2026 16:59:36 +0200
Subject: [PATCH 05/10] fix: resolve merge conflicts

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

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

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

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 3502f7bd7c800..f68da335805c6 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -47,6 +47,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
@@ -119,7 +149,7 @@ export default defineComponent({
 			required: true,
 		},
 
-		loading: {
+		navigating: {
 			type: Boolean,
 			default: false,
 		},
@@ -583,6 +613,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 62d3fcbf38d79..0e4d3c2c27005 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 372516756af3e..e549c0d460e43 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -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 a1f0b7859a5eabce24cc324a98d7fd5837b0a6bc Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 26 Oct 2026 15:41:35 +0100
Subject: [PATCH 07/10] 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 f68da335805c6..d877fd66c7c25 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -61,18 +61,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>
@@ -637,12 +625,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;
 		}
 
@@ -652,12 +640,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;
 		}
 
@@ -667,30 +655,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 0e4d3c2c27005..6cbdfb6027485 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>
 

From 463f62d513e8b9664fa601d840f9173dfe0812f9 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Wed, 4 Nov 2026 09:35:45 +0100
Subject: [PATCH 08/10] feat(files): adjust loading skeleton during navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 .../files/src/components/FilesListVirtual.vue | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index d877fd66c7c25..1108536f1c23d 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -61,6 +61,9 @@
 					<div class="files-list__skeleton-icon" />
 					<!-- Name skeleton -->
 					<div class="files-list__skeleton-name" />
+					<!-- Other columns skeleton -->
+					<div class="files-list__skeleton-column" />
+					<div class="files-list__skeleton-column" />
 				</div>
 			</div>
 		</template>
@@ -620,8 +623,9 @@ export default defineComponent({
 		}
 
 		.files-list__skeleton-checkbox {
-			width: var(--checkbox-size);
-			height: var(--checkbox-size);
+			width: 18px;
+			height: 18px;
+			margin: 6px;
 			border-radius: 4px;
 			background: linear-gradient(
 				90deg,
@@ -664,6 +668,21 @@ export default defineComponent({
 			min-width: 100px;
 		}
 
+		.files-list__skeleton-column {
+			width: calc(var(--row-height) * 2.5);
+			height: 20px;
+			border-radius: 4px;
+			background: linear-gradient(
+				90deg,
+				var(--color-placeholder-light),
+				var(--color-placeholder-dark),
+				var(--color-placeholder-light)
+			);
+			background-size: 200% 100%;
+			animation: skeleton-loading 1.5s infinite;
+			flex-shrink: 0;
+		}
+
 		@keyframes skeleton-loading {
 			0% {
 				background-position: 200% 0;

From 0a7b3674d62af7625785066c7a344db44045293b Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Thu, 12 Nov 2026 16:05:26 +0100
Subject: [PATCH 09/10] fix: test coverage issue

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

[skip ci]
---
 apps/files/src/components/FilesListVirtual.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 1108536f1c23d..fae1df58f18fa 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -669,7 +669,7 @@ export default defineComponent({
 		}
 
 		.files-list__skeleton-column {
-			width: calc(var(--row-height) * 2.5);
+			width: calc(var(--clickable-area-large) * 2.3);
 			height: 20px;
 			border-radius: 4px;
 			background: linear-gradient(

From b22d5d3d86840a55d6f03074aff4925dfedbf88a Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Fri, 13 Nov 2026 15:16:28 +0100
Subject: [PATCH 10/10] fix: add missing fix

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

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index fae1df58f18fa..4e6ab25d2ac22 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -8,6 +8,7 @@
 		:data-component="userConfig.grid_view ? FileEntryGrid : FileEntry"
 		data-key="source"
 		:data-sources="nodes"
+		:navigating="navigating"
 		:grid-mode="userConfig.grid_view"
 		:extra-props="{
 			isMimeAvailable,
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index e549c0d460e43..25fbf858a5834 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -90,6 +90,7 @@
 		<FilesListVirtual
 			v-else
 			ref="filesListVirtual"
+			:navigating="navigating"
 			:current-folder="currentFolder"
 			:current-view="currentView"
 			:nodes="dirContentsSorted"