From 750f99763ca3f26f999f98eb668958e3bbb6e9f8 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Thu, 3 Sep 2026 10:05:37 -0400
Subject: [PATCH 1/2] Updated load more styling and changed copy of button

---
 app/assets/stylesheets/partials/_pagination.scss | 14 ++++----------
 app/views/search/_load_more.html.erb             |  2 +-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/partials/_pagination.scss b/app/assets/stylesheets/partials/_pagination.scss
index e073b5c2..9e56074f 100644
--- a/app/assets/stylesheets/partials/_pagination.scss
+++ b/app/assets/stylesheets/partials/_pagination.scss
@@ -1,8 +1,7 @@
-.pagination-container {
+.pagination-container, #load-more {
   clear: both;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: center;
   padding-top: 1em;
   border-top: 1px solid $color-border-default;
   gap: 24px;
@@ -56,11 +55,6 @@
   }  
 }
 
-.load-more {
-  clear: both;
-  display: flex;
-  justify-content: center;
-  padding-top: 1em;
-  border-top: 1px solid $color-border-default;
-  margin-bottom: 48px;
-}
+#load-more {
+  justify-content: start;
+}
\ No newline at end of file
diff --git a/app/views/search/_load_more.html.erb b/app/views/search/_load_more.html.erb
index 879b1816..95c9b6be 100644
--- a/app/views/search/_load_more.html.erb
+++ b/app/views/search/_load_more.html.erb
@@ -15,7 +15,7 @@
   <div id="load-more" class="load-more">
     <%= link_to results_path(params_copy), class: 'btn button-secondary load-more-link',
                                       data: { turbo_stream: true }, rel: 'nofollow' do %>
-      Load more results
+      Show more results
     <% end %>
   </div>
 <% else %>

From eb509f4ea56c51064b039fd4f554ca22f31b3cab Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Thu, 3 Sep 2026 10:11:36 -0400
Subject: [PATCH 2/2] First stab at adjusting focus after button click

---
 app/javascript/loading_spinner.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/javascript/loading_spinner.js b/app/javascript/loading_spinner.js
index aa529612..47c845f0 100644
--- a/app/javascript/loading_spinner.js
+++ b/app/javascript/loading_spinner.js
@@ -52,10 +52,28 @@ document.addEventListener('turbo:frame-render', function(event) {
 });
 
 document.addEventListener('turbo:before-stream-render', function(event) {
-  if (window.pendingFocusAction === 'load-more') {
+  const stream = event.target;
+  if (window.pendingFocusAction !== 'load-more' ||
+      stream.getAttribute('action') !== 'append' ||
+      stream.getAttribute('target') !== 'results-list') {
+    return;
+  }
+
+  // Turbo has not appended the new results yet. Run the default renderer first,
+  // then focus the result immediately after the pre-request result count.
+  const render = event.detail.render;
+  event.detail.render = async function(streamElement) {
+    await render(streamElement);
+
+    const results = document.querySelectorAll('.results-list .result');
+    const firstNewResult = results[window.loadMoreResultCount];
+    const firstNewResultLink = firstNewResult?.querySelector('h3 a, .record-title a');
+    firstNewResultLink?.focus();
+
     document.getElementById('search-results')?.classList.remove('spinner');
     window.pendingFocusAction = null;
-  }
+    window.loadMoreResultCount = null;
+  };
 });
 
 document.addEventListener('click', function(event) {
@@ -63,10 +81,12 @@ document.addEventListener('click', function(event) {
   if (!(clickedElement instanceof Element)) { return; }
   const loadMoreLink = clickedElement.closest('.load-more-link');
 
-  // Handle load-more clicks. Results append in place, so do not scroll users
-  // back to the top or move focus away from their current reading position.
+  // Handle load-more clicks. Focus moves to the first appended result after
+  // Turbo renders the next batch.
   if (loadMoreLink) {
     document.getElementById('search-results')?.classList.add('spinner');
+    // Save the boundary between existing and newly appended results.
+    window.loadMoreResultCount = document.querySelectorAll('.results-list .result').length;
     window.pendingFocusAction = 'load-more';
     return;
   }