From bd0859cce0372c33e4ff701db46f749fa5c9495a Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Fri, 7 Nov 2025 21:53:03 +0000
Subject: [PATCH] Add HTMX indicator for import form to enhance user feedback
 during submission

---
 sbas/templates/sbas/import_llm_questions.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/sbas/templates/sbas/import_llm_questions.html b/sbas/templates/sbas/import_llm_questions.html
index 28af2f12..76cafc6e 100644
--- a/sbas/templates/sbas/import_llm_questions.html
+++ b/sbas/templates/sbas/import_llm_questions.html
@@ -2,14 +2,25 @@
 
 {% block content %}
   <h1>Import LLM Questions</h1>
-  <form id="llm-import-form" method="post" enctype="multipart/form-data" hx-post="{% url 'sbas:import_llm_questions' %}" hx-target="#import-preview" hx-swap="innerHTML">
+  <form id="llm-import-form" method="post" enctype="multipart/form-data" hx-post="{% url 'sbas:import_llm_questions' %}" hx-target="#import-preview" hx-swap="innerHTML" hx-indicator="#llm-import-indicator">
     {% csrf_token %}
     {{ form.as_p }}
     <div class="d-flex gap-2">
       <button class="btn btn-outline-primary" type="submit">Preview (dry run)</button>
       <button class="btn btn-secondary" type="button" onclick="document.getElementById('llm-import-form').reset()">Reset</button>
     </div>
+    <div class="mt-2">
+      <span id="llm-import-indicator" aria-hidden="true" style="display:none;">
+        <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
+        <span class="visually-hidden">Loading...</span>
+      </span>
+    </div>
   </form>
+  <style>
+    /* HTMX indicator for the import form */
+    #llm-import-indicator { display: none; }
+    #llm-import-indicator.htmx-request { display: inline-block; }
+  </style>
   <p>Upload a single JSON array, a single object, or JSONL (one JSON object per line) matching the agreed schema. Use the Preview button to inspect results before importing.</p>
   <div id="import-preview" class="mt-3"></div>
 {% endblock %}