From 4f6e9fae9da12d287ee36ba5b0701d61fdf5aa65 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Wed, 5 Nov 2025 22:03:02 +0000
Subject: [PATCH] Enhance case search functionality with loading indicator for
 improved user experience

---
 atlas/templates/atlas/index.html | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/atlas/templates/atlas/index.html b/atlas/templates/atlas/index.html
index 96f74567..4942e73f 100644
--- a/atlas/templates/atlas/index.html
+++ b/atlas/templates/atlas/index.html
@@ -46,12 +46,24 @@
                 <div class="card-body">
                     <h5 class="card-title">Search cases</h5>
                     <div class="mb-2">
-                        <input class="form-control" id="case-search-input" name="q" type="search"
-                            placeholder="Search cases by title or description"
-                            hx-get="{% url 'atlas:case_search_partial' %}"
-                            hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
-                            hx-target="#case-search-results" >
+                        <div class="input-group">
+                            <input class="form-control" id="case-search-input" name="q" type="search"
+                                placeholder="Search cases by title or description"
+                                hx-get="{% url 'atlas:case_search_partial' %}"
+                                hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
+                                hx-target="#case-search-results"
+                                hx-indicator="#case-search-indicator" />
+                            <span class="input-group-text" id="case-search-indicator" aria-hidden="true">
+                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                                <span class="visually-hidden">Loading</span>
+                            </span>
+                        </div>
                     </div>
+                    <style>
+                        /* Hide indicator by default; HTMX will add the `htmx-request` class during requests */
+                        #case-search-indicator { display: none; }
+                        #case-search-indicator.htmx-request { display: inline-flex; align-items: center; }
+                    </style>
                     <div id="case-search-results">
                         {% include 'atlas/partials/_case_search_results.html' with cases=None %}
                     </div>