ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance case search functionality with loading indicator for improved user experience

Browse Source
This commit is contained in:
Ross
2025-11-05 22:03:02 +00:00
parent 22299b9298
commit 4f6e9fae9d
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/index.html
+17 -5
View File
@@ -46,12 +46,24 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Search cases</h5> <h5 class="card-title">Search cases</h5>
<div class="mb-2"> <div class="mb-2">
<input class="form-control" id="case-search-input" name="q" type="search" <div class="input-group">
placeholder="Search cases by title or description" <input class="form-control" id="case-search-input" name="q" type="search"
hx-get="{% url 'atlas:case_search_partial' %}" placeholder="Search cases by title or description"
hx-trigger="input changed delay:500ms, keyup[key=='Enter']" hx-get="{% url 'atlas:case_search_partial' %}"
hx-target="#case-search-results" > 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> </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"> <div id="case-search-results">
{% include 'atlas/partials/_case_search_results.html' with cases=None %} {% include 'atlas/partials/_case_search_results.html' with cases=None %}
</div> </div>