Use OOB to set results count and fix jumping when loading pages

This correctly centers the pagination spinner, and ensures there's only 1.

static/src/js/search.js

@@ -1,15 +0,0 @@
-window.addEventListener("DOMContentLoaded", () => {
-  const searchResults = document.getElementById("search-results");
-  const resultsCountDisplay = document.getElementById("result-count");
-
-  function handleSearchResults(event) {
-    const resultsCount = event.target.querySelectorAll(".listing-item").length;
-    if (resultsCount) {
-      resultsCountDisplay.textContent =
-        `Found ${resultsCount} result` + (resultsCount > 1 ? "s" : "");
-    } else {
-      resultsCountDisplay.textContent = "";
-    }
-  }
-  searchResults.addEventListener("htmx:afterSwap", handleSearchResults);
-});

static/src/scss/_search.scss

@@ -14,17 +14,15 @@ body.page-searchpage {
     max-width: 80%;
   }
 
-  .htmx-request {
+  .htmx-request i {
     animation: search-loading 1.5s linear infinite;
   }
 
   #search-results > p {
     font-size: 1.5rem;
     text-align: center;
-  }
-
-  #result-count {
-    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
   }
 
   input[type="search"] {
@@ -46,8 +44,9 @@ body.page-searchpage {
     margin-top: 2rem;
   }
 
-  .search-page-indicator {
-    width: 100%;
+  #search-page-indicator {
+    text-align: center;
+    margin-top: 1.5rem;
 
     &:not(.htmx-request) {
       display: none;

website/search/templates/search/enter-search-term.html

@@ -1 +1,3 @@
 <p>Enter a search term (of at least {{ MIN_SEARCH_LENGTH }} characters) to search</p>
+
+{% if request.htmx %}<p id="result-count" hx-swap-oob="true"></p>{% endif %}

website/search/templates/search/search_page.html

@@ -25,10 +25,9 @@
         {% include "search/enter-search-term.html" %}
       {% endif %}
     </div>
+
+    <div class="htmx-indicator" id="search-page-indicator">
+      <i class="fas fa-circle-notch"></i>
+    </div>
   </section>
 {% endblock %}
-
-{% block extra_js %}
-  {{ block.super }}
-  <script async defer type="text/javascript" src="{% static 'js/search.js' %}" integrity="{% sri_integrity_static 'js/search.js' %}"></script>
-{% endblock %}

website/search/templates/search/search_results.html

@@ -4,11 +4,13 @@
   {% include "common/listing-item.html" %}
 {% endfor %}
 
-{% if not results and page_num == 1 %}<p>No results found</p>{% endif %}
+{% if not results and page_num == 1 %}
+  <p>No results found</p>
+  <p id="result-count" hx-swap-oob="true"></p>
+{% else %}
+  <p id="result-count" hx-swap-oob="true">Found {{ paginator.count }} results</p>
+{% endif %}
 
 {% if results.has_next %}
-  <span hx-get="{{ search_url }}{% querystring page=results.next_page_number %}" hx-trigger="revealed" hx-indicator="#search-page-indicator-{{ results.next_page_number }}" hx-swap="outerHTML"></span>
-  <div class="icon mt-5 mx-auto htmx-indicator search-page-indicator" id="search-page-indicator-{{ results.next_page_number }}">
-    <i class="fas fa-circle-notch"></i>
-  </div>
+  <span hx-get="{{ search_url }}{% querystring page=results.next_page_number %}" hx-trigger="revealed" hx-indicator="#search-page-indicator" hx-swap="outerHTML"></span>
 {% endif %}