From ee418c5019c89452971d1eee7242ff1f8a14d54e Mon Sep 17 00:00:00 2001 From: Matthew Bernhardt Date: Tue, 18 Nov 2025 17:08:03 -0500 Subject: [PATCH] Add / remove spinner on pagination changes ** Why are these changes being introduced: We recently refactored how the spinner is applied and removed when changing between tabs, but neglected to be consistent when it comes to pagination changes. ** Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/use-201 ** How does this address that need: This adds the same add/remove calls for managing the spinner to the pagination management branches of the javascript file. It elects to maintain the separate pathways for these calls, rather than trying to handle the spinner in a unified area of the event listeners. ** Document any side effects to this change: The duplication of calls, like lines 46-50 being basically the same as lines 26-30, may be seen as a code smell later. For now, though, I prefer to keep them separate like this - both for parity between these pathways and also symmetry with the .classList.add() lines at 61 and 75. It seems safer to handle the spinner only in qualified contexts, rather than risking it appearing or disappearing without that being intended. --- app/javascript/loading_spinner.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/javascript/loading_spinner.js b/app/javascript/loading_spinner.js index 98186dc4..2626047e 100644 --- a/app/javascript/loading_spinner.js +++ b/app/javascript/loading_spinner.js @@ -22,6 +22,10 @@ document.addEventListener('turbo:frame-render', function(event) { if (firstResult) { firstResult.focus(); } + + // Remove the spinner now that things are ready + document.getElementById('search-results').classList.remove('spinner'); + // Clear the pending action window.pendingFocusAction = null; }; @@ -53,7 +57,12 @@ document.addEventListener('click', function(event) { // Handle pagination clicks if (clickedElement.closest('.pagination-container') || clickedElement.matches('.first a, .previous a, .next a')) { + // Throw the spinner on the search results immediately + document.getElementById('search-results').classList.add('spinner'); + + // Position the window at the top of the results window.scrollTo({ top: 0, behavior: 'smooth' }); + window.pendingFocusAction = 'pagination'; }