Enhance category search form with loading indicator and improved HTMX integration

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" />
+                             hx-include="#category-search-input"
-                <button class="btn btn-primary" type="submit">Search</button>
+                             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>