From 9571ec1ae82fe9cf5fc534bdf908f0db313341f0 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 e4c42a00038ae..03cc60e30c090 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 {