Overlay spinner on tabs and manage focus appropriately

Author: jazairi

app/assets/stylesheets/application.css.scss

@@ -18,5 +18,6 @@
 @import "partials/_search";
 @import "partials/_shared";
 @import "partials/_results";
+@import "partials/_loading_spinner";
 @import "partials/_typography";
 @import "partials/_suggestion-panel";

app/assets/stylesheets/partials/_loading_spinner.scss

@@ -1,32 +1,52 @@
-// Loading indicator for turbo frame updates
+// Loading indicator for Turbo Frame updates
 // https://discuss.hotwired.dev/t/show-spinner-everytime-async-frame-reloads/3483/3
 @keyframes spinner {
   to { 
     transform: rotate(360deg); 
   }
 }
 
-[busy]:not([no-spinner]) {
+// Show loading state in tab area
+.tab-navigation {
   position: relative;
+  
+  // When busy, hide tabs and show spinner
+  &.loading {
+    .tab-link {
+      visibility: hidden;
+    }
 
-  > * {
-    opacity: 0.5;
-  }
+    // 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;
+    }
 
-  &::after {
-    content: '';
-    box-sizing: border-box;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin-top: -1.25rem;
-    margin-left: -1.25rem;
-    border-radius: 50%;
-    border: 0.275rem solid rgba($color-red-500, 0.3);
-    border-top-color: $color-red-500;
-    animation: spinner 0.6s linear infinite;
-    z-index: 9999;
+    // 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;
+    }
   }
 }
+
+// Dim results content when loading
+[busy]:not([no-spinner]) > * {
+  opacity: 0.5;
+}

app/javascript/application.js

@@ -1,6 +1,7 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import "loading_spinner"
 
 // Show the progress bar after 200 milliseconds, not the default 500
 Turbo.config.drive.progressBarDelay = 200;

app/javascript/loading_spinner.js

@@ -0,0 +1,52 @@
+// Loading spinner behavior for search results
+document.addEventListener('turbo:frame-render', function(event) {
+  // Remove loading state from tabs when frame finishes loading
+  const tabs = document.querySelector('.tab-navigation');
+  if (tabs) {
+    tabs.classList.remove('loading');
+  }
+  
+  // Focus management after content loads
+  if (window.pendingFocusAction) {
+    if (window.pendingFocusAction === 'pagination') {
+      // Focus on first result for pagination
+      const firstResult = document.querySelector('.results-list .result h3 a, .results-list .result .record-title a');
+      if (firstResult) {
+        firstResult.focus();
+      }
+    } else if (window.pendingFocusAction === 'tab-switch') {
+      // Focus on results summary for tab switches
+      const resultsContext = document.querySelector('.results-context');
+      if (resultsContext) {
+        resultsContext.setAttribute('tabindex', '-1');
+        resultsContext.focus();
+      }
+    }
+    // Clear the pending action
+    window.pendingFocusAction = null;
+  }
+});
+
+document.addEventListener('click', function(event) {
+  const clickedElement = event.target;
+
+  // Handle pagination clicks (scroll to top and set pending focus action)
+  if (clickedElement.matches('.tab-link')) {
+    const tabs = document.querySelector('.tab-navigation');
+    if (tabs) {
+      tabs.classList.add('loading');
+    }
+    window.pendingFocusAction = 'tab-switch';
+  }
+
+  // Handle pagination clicks (scroll to top and set pending focus action)
+  if (clickedElement.closest('.pagination-container') || 
+      clickedElement.matches('.first a, .previous a, .next a')) {
+    const tabs = document.querySelector('.tab-navigation');
+    if (tabs) {
+      tabs.classList.add('loading');
+    }
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    window.pendingFocusAction = 'pagination';
+  }
+});

config/importmap.rb

@@ -1,6 +1,7 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application", preload: true
+pin "loading_spinner", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true