From 21a7383c4f45adfa619e74b6acf69016ea9b0ac4 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 10 Nov 2025 12:11:19 +0000
Subject: [PATCH] Enhance loading indicators for response summary and responses
 in exam review fragment

---
 .../exam_review_question_fragment.html        | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/anatomy/templates/anatomy/partials/exam_review_question_fragment.html b/anatomy/templates/anatomy/partials/exam_review_question_fragment.html
index 6929515e..6b67e104 100644
--- a/anatomy/templates/anatomy/partials/exam_review_question_fragment.html
+++ b/anatomy/templates/anatomy/partials/exam_review_question_fragment.html
@@ -2,7 +2,7 @@
     <div class="card-body">
         <p class="lead">{{ question.question_type }}</p>
         <div id="anatomy-dicom-image" class="dicom-image-legacy" data-url="{{ question.get_image_url }}"
-            data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
+             data-annotations='{{question.image_annotations}}' data-edit_annotation=true>
         </div>
 
         <p>
@@ -51,7 +51,13 @@
             <div id="anatomy-response-summary"
                  hx-get="{% url 'anatomy:exam_review_question_summary' exam.pk q_index %}"
                  hx-trigger="load"
-                 hx-swap="innerHTML">
+                 hx-swap="innerHTML"
+                 hx-indicator="#anatomy-summary-indicator-{{ question.pk }}">
+                <div id="anatomy-summary-indicator-{{ question.pk }}" style="display:none">
+                    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
+                    <span class="visually-hidden">Loading summary</span>
+                </div>
+                <style> #anatomy-summary-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
                 <div class="small text-muted">Loading summary…</div>
             </div>
         </div>
@@ -64,10 +70,16 @@
                     <button class="btn btn-sm btn-outline-primary"
                             hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
                             hx-target="#anatomy-responses-container"
-                            hx-swap="innerHTML">Show responses</button>
+                            hx-swap="innerHTML"
+                            hx-indicator="#anatomy-responses-indicator-{{ question.pk }}">Show responses</button>
                 </div>
             </div>
             <div class="mt-2" id="anatomy-responses-container">
+                <div id="anatomy-responses-indicator-{{ question.pk }}" style="display:none">
+                    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
+                    <span class="visually-hidden">Loading responses</span>
+                </div>
+                <style> #anatomy-responses-indicator-{{ question.pk }}.htmx-request{display:inline-block !important;} </style>
                 <div class="text-muted small">Responses are hidden — click “Show responses” to load.</div>
             </div>
         </div>
@@ -96,3 +108,4 @@
 
     </div>
 </div>
+