From 7647ace4a0717cd1a810dd20edda072d347ac09e Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 1 Aug 2022 22:23:06 +0100
Subject: [PATCH] Add a loading spinner

---
 static/src/scss/_search.scss                  | 18 ++++++++++
 static/src/scss/base.scss                     |  1 +
 .../search/templates/search/search_page.html  | 34 +++++++++++++------
 3 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 static/src/scss/_search.scss

diff --git a/static/src/scss/_search.scss b/static/src/scss/_search.scss
new file mode 100644
index 0000000..429ed7f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss
index c64fe5c..11d8203 100644
--- a/static/src/scss/base.scss
+++ b/static/src/scss/base.scss
@@ -13,6 +13,7 @@
 @import "listing";
 @import "blocks";
 @import "shareon";
+@import "search";
 
 html,
 body {
diff --git a/website/search/templates/search/search_page.html b/website/search/templates/search/search_page.html
index 9908024..8ede561 100644
--- a/website/search/templates/search/search_page.html
+++ b/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>