Merge pull request #11846 from richard-cox/fix-wm-loading

Ensure loading indicator doesn't show outside it's context
rancher · Sep 24, 2024 · 17623b9 · 17623b9
2 parents 626d7e4 + 62619c2
commit 17623b9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/shell/assets/styles/base/_variables.scss b/shell/assets/styles/base/_variables.scss
@@ -25,11 +25,20 @@ $z-indexes: (
   overContent: 2,
   hoverOverContent: 3,
 
-  mainHeader: 12,
-
   tableGroup: 10,
   fixedTableHeader: 11,
 
+  // ---- Boundary for central content (in `<main>`)
+
+  // This covers both relative and content modes of the loading indicator
+  loading: 12,
+
+  // Users can click on shell in header and show shell even with most loading indicators showing,
+  // so add it above them
+  windowsManager: 13,
+
+  mainHeader: 14,
+
   modalOverlay: 20,
   modalContent: 21,
 
@@ -38,8 +47,7 @@ $z-indexes: (
   dropdownOverlay: 40,
   dropdownContent: 41,
 
-  loadingOverlay: 50,
-  loadingContent: 51
+  loadingMain: 51
 );
 
 // Usage Example:

diff --git a/shell/assets/styles/global/_layout.scss b/shell/assets/styles/global/_layout.scss
@@ -115,7 +115,7 @@ HEADER {
 .wm {
   grid-area: wm;
   overflow-y: hidden;
-  z-index: 1;
+  z-index: z-index('windowsManager');
 }
 
 .localeSelector {

diff --git a/shell/components/Loading.vue b/shell/components/Loading.vue
@@ -68,10 +68,13 @@ export default {
     left: 0;
     right: 0;
     text-align: center;
-    z-index: z-index('loadingContent');
+
+    // Covers both default `content` mode, an often used `relative` mode and any other value of mode
+    z-index: z-index('loading');
 
     &-main-mode {
       top: var(--header-height);
+      z-index: z-index('loadingMain');
     }
 
     &-content-mode {