Convert to spinner overlaid on results

Author: jazairi

app/assets/stylesheets/partials/_loading_spinner.scss

@@ -6,47 +6,44 @@
   }
 }
 
-// Show loading state in tab area
-.tab-navigation {
+// Results overlay when loading
+[busy]:not([no-spinner]) {
   position: relative;
-  
-  // When busy, hide tabs and show spinner
-  &.loading {
-    .tab-link {
-      visibility: hidden;
-    }
+  min-height: 400px;
+  display: block;
 
-    // Overlay to cover both tab areas
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 12rem;
-      bottom: 0;
-      background-color: $color-gray-100;
-      border-radius: 0.25rem;
-      z-index: 10;
-    }
+  > * {
+    opacity: 0.3;
+  }
 
-    // Centered spinner within the overlay
-    &::before {
-      content: '';
-      position: absolute;
-      top: calc(50% - 0.75rem);
-      left: calc(6rem - 0.75rem); // Center in 12rem wide overlay
-      width: 1.5rem;
-      height: 1.5rem;
-      border-radius: 50%;
-      border: 0.2rem solid rgba($color-red-500, 0.3);
-      border-top-color: $color-red-500;
-      animation: spinner 0.6s linear infinite;
-      z-index: 11;
-    }
+  // Loading text
+  &::before {
+    content: 'Loading results...';
+    position: absolute;
+    top: 5.5rem;
+    left: 50%;
+    margin-left: -6rem; // Center the text box (12rem / 2)
+    width: 12rem;
+    font-size: $fs-small;
+    font-weight: $fw-semibold;
+    color: $color-black;
+    text-align: center;
+    z-index: 1001;
   }
-}
 
-// Dim results content when loading
-[busy]:not([no-spinner]) > * {
-  opacity: 0.5;
+  // Spinner positioned above text
+  &::after {
+    content: '';
+    position: absolute;
+    top: 1rem;
+    left: 50%;
+    margin-left: -2rem;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    border: 0.3rem solid $color-gray-200;
+    border-top-color: $color-red-500;
+    animation: spinner 1s linear infinite;
+    z-index: 1000;
+  }
 }