1 files changed, 23 insertions, 11 deletions
diff --git a/templates/pages/home.html b/templates/pages/home.html
index 6a5d4cd..c44a017 100644
--- a/templates/pages/home.html
+++ b/templates/pages/home.html
@@ -6,21 +6,33 @@
   hx-trigger="submit load"
   hx-target=".app"
   hx-swap="innerHTML"
+  hx-indicator="#spinner"
+  hx-target-422="#form-error"
+  hx-target-5*="#form-error"
 >
-  <input type="text" name="url" class="border-2 border-black" />
+<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
+  <input type="text" name="url" class="border-2 border-black" style="margin-bottom: 0px; margin-right: 10px;"/>
+  <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner" alt="loading indicator "/>
+</div>
   <button type="submit" class="cursor-pointer">Submit</button>
+  <div id="form-error"></div>
 </form>
 
 <h3>search for recipes 🔎</h3>
-<input
-  type="text"
-  hx-trigger="input"
-  hx-post="/recipes/search"
-  hx-target=".app"
-  hx-include="#facets"
-  name="q"
-  class="border-2 border-black"
-  id="search"
-/>
+<div style="display: flex; align-items: center; margin-bottom: 15px;"}>
+  <input
+    type="text"
+    hx-trigger="input"
+    hx-post="/recipes/search"
+    hx-target=".app"
+    hx-include="#facets"
+    hx-indicator="#spinner-2"
+    name="q"
+    class="border-2 border-black"
+    id="search"
+    style="margin-bottom: 0px; margin-right: 10px;"
+  />
+  <img src={{url_for("static", filename="images/bars.svg")}} class="htmx-indicator" id="spinner-2" alt="loading indicator "/>
+</div>
 
 {% include "/components/app.html" %} {% endblock %}