Merge pull request #264 from MITLibraries/use-134

Add loading spinner for Turbo Frame updates

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

@@ -0,0 +1,50 @@
+// Loading indicator for pagination (Turbo Frame updates)
+// Tab navigation uses full page loads with Turbo's built-in progress bar
+// https://discuss.hotwired.dev/t/show-spinner-everytime-async-frame-reloads/3483/3
+@keyframes spinner {
+  to { 
+    transform: rotate(360deg); 
+  }
+}
+
+// Pagination overlay when loading
+[busy]:not([no-spinner]) {
+  position: relative;
+  min-height: 400px;
+  display: block;
+
+  > * {
+    opacity: 0.3;
+  }
+
+  // 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;
+  }
+
+  // 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;
+  }
+}

app/assets/stylesheets/partials/_results.scss

@@ -118,4 +118,4 @@
     font-size: 1.8rem;
     line-height: 1.1;
   }
-}
+}

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
-window.Turbo.setProgressBarDelay(200);
+Turbo.config.drive.progressBarDelay = 200;

app/javascript/loading_spinner.js

@@ -0,0 +1,23 @@
+// Loading spinner behavior for pagination (Turbo Frame updates)
+document.addEventListener('turbo:frame-render', function(event) {
+  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();
+    }
+    // Clear the pending action
+    window.pendingFocusAction = null;
+  }
+});
+
+document.addEventListener('click', function(event) {
+  const clickedElement = event.target;
+
+  // Handle pagination clicks
+  if (clickedElement.closest('.pagination-container') || 
+      clickedElement.matches('.first a, .previous a, .next a')) {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    window.pendingFocusAction = 'pagination';
+  }
+});

app/views/search/results.html.erb

@@ -14,7 +14,7 @@
 
   <%= render(partial: 'trigger_tacos') if tacos_enabled? %>
 
-  <%= turbo_frame_tag "search-results" do %>
+  <%= turbo_frame_tag "search-results", data: { turbo_action: "advance" } do %>
     <div class="layout-3q1q layout-band top-space">
       <main id="results" class="col3q wrap-results">
         <% if @show_primo_continuation %>

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