From 4a3055cab87ac57fadb2caa34260084183e52d0a Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Tue, 28 Oct 2025 17:45:41 +0000
Subject: [PATCH] Enhance category search form with loading indicator and
 improved HTMX integration

---
 atlas/templates/atlas/categories_list.html | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/atlas/templates/atlas/categories_list.html b/atlas/templates/atlas/categories_list.html
index f3e4cabb..e7839b4d 100644
--- a/atlas/templates/atlas/categories_list.html
+++ b/atlas/templates/atlas/categories_list.html
@@ -13,14 +13,28 @@
     </ul>
 
         <div class="mt-4 mb-3">
-            <form method="get" class="d-flex" action="" id="category-search-form">
+            {# HTMX loading indicator styles: hide by default, show when HTMX adds the .htmx-request class #}
+            <style>
+            #category-search-loading { display: none; }
+            #category-search-loading.htmx-request { display: inline-block; }
+            </style>
+
+            <form method="get" class="d-flex align-items-center" action="" id="category-search-form">
                 <input id="category-search-input" type="search" name="q" placeholder="Search all categories (conditions, findings, structures...)" value="{{ query|default:'' }}" class="form-control me-2" 
                              hx-get="{% url 'atlas:categories_search_partial' %}"
                              hx-trigger="keyup changed delay:500ms"
                              hx-target="#category-search-results"
                              hx-swap="innerHTML"
-                             hx-include="#category-search-input" />
-                <button class="btn btn-primary" type="submit">Search</button>
+                             hx-include="#category-search-input"
+                             hx-indicator="#category-search-loading" />
+
+                {# Spinner shown while HTMX request is in-flight (selector matched by hx-indicator) #}
+                <div id="category-search-loading" role="status" aria-hidden="true" class="ms-2">
+                    <span class="spinner-border spinner-border-sm text-primary" aria-hidden="true"></span>
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+
+                <button class="btn btn-primary ms-2" type="submit">Search</button>
             </form>
         </div>