Add a loading spinner

static/src/scss/_search.scss

@@ -0,0 +1,18 @@
+@keyframes search-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+body.page-searchpage {
+  .search-controls {
+    margin: 2rem auto;
+    max-width: 80%;
+  }
+
+  #search-indicator {
+    animation: search-loading 1.5s linear infinite;
+  }
+}

static/src/scss/base.scss

@@ -13,6 +13,7 @@
 @import "listing";
 @import "blocks";
 @import "shareon";
+@import "search";
 
 html,
 body {

website/search/templates/search/search_page.html

@@ -10,17 +10,29 @@
   </section>
 {% endif %}
 
-<section class="container">
-  <input
-    type="search"
-    name="q"
-    placeholder="Search"
-    hx-get="{{ search_url }}"
-    hx-trigger="keyup changed delay:300ms, search, revealed"
-    hx-target="#search-results"
-    autocomplete="off"
-    value="{{ search_query }}"
-  >
+<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:300ms, search{% if search_query %}, revealed{% endif %}"
+        hx-target="#search-results"
+        autocomplete="off"
+        value="{{ search_query }}"
+        hx-indicator="#search-indicator"
+      >
+      <span class="icon is-small is-left">
+        <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>
+    </p>
+  </div>
 </section>
 
 <section class="container" id="search-results"></section>