Use content spinner for tab changes

Why are these changes being introduced:

* Initial implementation used full page refresh but that removed the
  desired spinners

Relevant ticket(s):

* https://mitlibraries.atlassian.net/browse/USE-135

How does this address that need:

* Moves back to target content refresh with turbo frame
* Adds JavaScript to update hidden form element and set active class
  on tab
* Introduces Feature to slow down fast requests when testing page
  elements that are fleeting like spinners/loaders

Author: JPrevost

README.md

@@ -97,6 +97,7 @@ See `Optional Environment Variables` for more information.
 - `FEATURE_GEODATA`: Enables features related to geospatial data discovery. Setting this variable to `true` will trigger geodata
 mode. Note that this is currently intended _only_ for the geodata app and
 may have unexpected consequences if applied to other TIMDEX UI apps.
+- `FEATURE_SIMULATE_SEARCH_LATENCY`: DO NOT SET IN PRODUCTION. Set to ensure a minimum of a one second delay in returning search results. Useful to see spinners/loaders. Only introduces delay for results that take less than one second to complete.
 - `FILTER_ACCESS_TO_FILES`: The name to use instead of "Access to files" for that filter / aggregation.
 - `FILTER_CONTENT_TYPE`: The name to use instead of "Content type" for that filter / aggregation.
 - `FILTER_CONTRIBUTOR`: The name to use instead of "Contributor" for that filter / aggregation.

app/controllers/search_controller.rb

@@ -1,6 +1,7 @@
 class SearchController < ApplicationController
   before_action :validate_q!, only: %i[results]
   before_action :set_active_tab, only: %i[results]
+  around_action :sleep_if_too_fast, only: %i[results]
 
   before_action :validate_geobox_presence!, only: %i[results]
   before_action :validate_geobox_range!, only: %i[results]
@@ -30,6 +31,25 @@ def results
 
   private
 
+  # Sleep to simulate latency for testing loading indicators when responses are fast
+  def sleep_if_too_fast
+    start_time = Time.now
+
+    yield
+
+    end_time = Time.now
+    duration = end_time - start_time
+
+    return unless Feature.enabled?(:simulate_search_latency)
+
+    Rails.logger.debug "Action #{action_name} from controller #{controller_name} took #{duration.round(2)} seconds to execute."
+
+    return unless duration < 1
+
+    Rails.logger.debug("Sleeping for #{1 - duration}")
+    sleep(1 - duration)
+  end
+
   def load_gdt_results
     query = QueryBuilder.new(@enhanced_query).query
 

app/javascript/loading_spinner.js

@@ -8,7 +8,35 @@ document.addEventListener('turbo:frame-render', function(event) {
     }
     // Clear the pending action
     window.pendingFocusAction = null;
-  }
+  };
+
+  if (window.pendingFocusAction === 'tab') {
+    // console.log("Tab change detected - focusing on first result");
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryParam = urlParams.get('tab');
+    const searchInput = document.querySelector('input[name="tab"]');
+    
+    // update hidden form element to ensure correct tab is used for subsequent searches
+    if (searchInput && queryParam != null) {
+      searchInput.value = queryParam;
+      // console.log(`Updated tab input value to: ${queryParam}`);
+    }
+
+    // update active tab styling
+    // remove active class from all tabs
+    document.querySelectorAll('.tab-link').forEach((tab) => {
+      tab.classList.remove('active');
+    });
+    // add active class to current tab
+    const currentTabLink = document.querySelector(`.tab-link[href*="tab=${queryParam}"]`);
+    if (currentTabLink) {
+      currentTabLink.classList.add('active');
+    }
+
+    // Clear the pending action
+    window.pendingFocusAction = null;
+  };
 });
 
 document.addEventListener('click', function(event) {
@@ -20,4 +48,26 @@ document.addEventListener('click', function(event) {
     window.scrollTo({ top: 0, behavior: 'smooth' });
     window.pendingFocusAction = 'pagination';
   }
-});
+
+  // Handle tab clicks
+  if (clickedElement.closest('.tab-navigation')) {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    window.pendingFocusAction = 'tab';
+  }
+});
+
+// On Turbo Frame render, update the search input value to match the current URL parameter
+// This ensures that after using the back button the search input reflects the correct query
+document.addEventListener('turbo:load', function(event) {
+  // update form element name 'q' to use current url paramater `q`
+  // console.log(`turbo:frame-render event detected for frame: ${event.target.id}`);
+  const urlParams = new URLSearchParams(window.location.search);
+  const queryParam = urlParams.get('q');
+  const searchInput = document.querySelector('input[name="q"]');
+  if (searchInput && queryParam != null) {
+    searchInput.value = queryParam;
+    // console.log(`Updated search input value to: ${queryParam}`);
+  }
+});
+
+

app/models/feature.rb

@@ -33,7 +33,7 @@
 #
 class Feature
   # List of all valid features in the application
-  VALID_FEATURES = %i[geodata boolean_picker].freeze
+  VALID_FEATURES = %i[geodata boolean_picker simulate_search_latency].freeze
 
   # Check if a feature is enabled by name
   #

app/views/search/_source_tabs.html.erb

@@ -2,9 +2,9 @@
   <div id="tabs" class="tab-navigation top-space">
     <%= link_to "Primo", results_path(params.permit(:q, :per_page, :page).merge(tab: 'primo')), 
                 class: "tab-link #{'active' if @active_tab == 'primo'}", 
-                data: { turbo_frame: "_top", turbo_action: "advance" } %>
+                data: { turbo_frame: "search-results", turbo_action: "advance" } %>
     <%= link_to "TIMDEX", results_path(params.permit(:q, :per_page, :page).merge(tab: 'timdex')), 
                 class: "tab-link #{'active' if @active_tab == 'timdex'}", 
-                data: { turbo_frame: "_top", turbo_action: "advance" } %>
+                data: { turbo_frame: "search-results", turbo_action: "advance" } %>
   </div>