From 61efaae1081dca63305ad135a6d423ab5769ac06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20Eppl=C3=A9e?= <hello@rafa.ee>
Date: Tue, 28 Jan 2025 16:03:55 +0100
Subject: [PATCH] Add loading indicator for bookmark create search

---
 templates/create_bookmark.html | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/templates/create_bookmark.html b/templates/create_bookmark.html
index 812ee7a..91479dd 100644
--- a/templates/create_bookmark.html
+++ b/templates/create_bookmark.html
@@ -63,18 +63,27 @@ <h1 class="text-xl font-bold">Add a bookmark</h1>
       {% endfor %}
     </div>
     {% call form::errors(errors, "list_search_term") %}
-    <input
-      type="search"
-      name="list_search_term"
-      id="list_search_term"
-      value="{{ input.list_search_term.as_deref().unwrap_or_default() }}"
-      hx-trigger="input changed delay:300ms,search"
-      hx-post="/bookmarks/create"
-      hx-target="#search_results"
-      hx-select="#search_results"
-      hx-swap="outerHTML"
-      class="rounded py-1.5 px-3 my-2 bg-neutral-900"
-    />
+    <div class="relative">
+      <input
+        type="search"
+        name="list_search_term"
+        id="list_search_term"
+        value="{{ input.list_search_term.as_deref().unwrap_or_default() }}"
+        hx-trigger="input changed delay:200ms,search"
+        hx-post="/bookmarks/create"
+        hx-target="#search_results"
+        hx-select="#search_results"
+        hx-swap="outerHTML"
+        hx-indicator="#list_search_term_indicator"
+        class="rounded py-1.5 px-3 my-2 bg-neutral-900 w-full"
+      />
+      <span class="absolute right-0 inline-flex items-center w-0 h-full">
+        <span
+          id="list_search_term_indicator"
+          class="block w-4 h-4 -ml-6 border-2 rounded-full border-neutral-400 animate-spin border-t-neutral-900 htmx-indicator"
+        ></span
+      ></span>
+    </div>
     <div id="search_results" class="overflow-y-scroll max-h-96">
       {% for list in search_results %}
         <button