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 <[email protected]>
nextcloud · Aug 21, 2024 · aa7e81d · aa7e81d
1 parent 748e267
commit aa7e81d
Showing 1 changed file with 6 additions and 6 deletions.
diff --git 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 {