static/src/scss/_search.scss

@@ -14,10 +14,6 @@ body.page-searchpage {
     max-width: 80%;
   }
 
-  .htmx-request i {
-    animation: search-loading 1.5s linear infinite;
-  }
-
   #search-results > p {
     font-size: 1.5rem;
     text-align: center;
@@ -47,9 +43,19 @@ body.page-searchpage {
   #search-page-indicator {
     text-align: center;
     margin-top: 1.5rem;
+    font-size: $size-3;
 
     &:not(.htmx-request) {
       display: none;
     }
   }
+
+  // The search icon is hidden during requests
+  #search-icon {
+    opacity: 1 !important;
+
+    &.htmx-request {
+      opacity: 0 !important;
+    }
+  }
 }

website/search/templates/search/search_page.html

@@ -6,12 +6,12 @@
   <section class="container search-controls">
     <div class="field">
       <p class="control has-icons-left has-icons-right">
-        <input type="search" class="input" name="q" placeholder="Search" hx-get="{{ search_url }}" hx-trigger="keyup changed delay:200ms, search{% if search_query %}, load{% endif %}" hx-target="#search-results" autocomplete="off" value="{{ search_query }}" hx-indicator="#search-indicator" />
-        <span class="icon is-small is-left">
+        <input type="search" class="input" name="q" placeholder="Search" hx-get="{{ search_url }}" hx-trigger="keyup changed delay:200ms, search{% if search_query %}, load{% endif %}" hx-target="#search-results" autocomplete="off" value="{{ search_query }}" hx-indicator=".search-indicator" />
+        <span class="icon is-small is-left htmx-indicator search-indicator" id="search-icon">
           <i class="fas fa-search"></i>
         </span>
-        <span class="icon is-small is-right htmx-indicator" id="search-indicator">
-          <i class="fas fa-circle-notch"></i>
+        <span class="icon is-small is-left htmx-indicator search-indicator">
+          <i class="fas fa-spinner fa-pulse"></i>
         </span>
       </p>
     </div>
@@ -27,7 +27,7 @@
     </div>
 
     <div class="htmx-indicator" id="search-page-indicator">
-      <i class="fas fa-circle-notch"></i>
+      <i class="fas fa-spinner fa-pulse"></i>
     </div>
   </section>
 {% endblock %}

website/search/tests.py

@@ -41,7 +41,7 @@ class SearchPageTestCase(TestCase):
         self.assertEqual(search_input.attrs["value"], "")
 
         self.assertEqual(len(soup.select(search_input.attrs["hx-target"])), 1)
-        self.assertEqual(len(soup.select(search_input.attrs["hx-indicator"])), 1)
+        self.assertEqual(len(soup.select(search_input.attrs["hx-indicator"])), 2)
 
 
 class SearchPageResultsTestCase(TestCase):