From 1331ce7e7c049ca24f449c5beb79539f307fbd7a Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 21 Aug 2024 02:27:02 +0200
Subject: [PATCH] fix(files): Move loading icon before grid toggle

This prevents jumping of that toggle button when the view is loading.
Also adjust the design for Nextcloud 30 (prevent jumping of breadcrumbs when loading due to increased height).

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/files/src/views/FilesList.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index e4c42a00038..03cc60e30c0 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -48,6 +48,9 @@
 				</template>
 			</BreadCrumbs>
 
+			<!-- Secondary loading indicator -->
+			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
+
 			<NcButton v-if="filesListWidth >= 512 && enableGridView"
 				:aria-label="gridViewButtonLabel"
 				:title="gridViewButtonLabel"
@@ -59,9 +62,6 @@
 					<ViewGridIcon v-else />
 				</template>
 			</NcButton>
-
-			<!-- Secondary loading indicator -->
-			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
 		</div>
 
 		<!-- Drag and drop notice -->
@@ -703,9 +703,9 @@ export default defineComponent({
 	}
 
 	&__refresh-icon {
-		flex: 0 0 44px;
-		width: 44px;
-		height: 44px;
+		flex: 0 0 var(--default-clickable-area);
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 	}
 
 	&__loading-icon {