Add loading spinner and blur effect for question fragment during HTMX requests; optimize answered and flagged state queries

physics/templates/physics/exam_take.html

@@ -76,6 +76,55 @@
             }catch(e){ console && console.error && console.error(e); }
         };
     </script>
+        <script>
+            // Show a blur + spinner on the question fragment while HTMX loads it
+            (function(){
+                function showLoading(){
+                    try{
+                        const frag = document.getElementById('question-fragment');
+                        if(!frag) return;
+                        frag.classList.add('loading');
+                        if(!frag.querySelector('.loading-spinner')){
+                            const s = document.createElement('div');
+                            s.className = 'loading-spinner';
+                            s.setAttribute('aria-hidden','true');
+                            frag.appendChild(s);
+                        }
+                    }catch(e){console && console.error && console.error(e);}            
+                }
+
+                function hideLoading(){
+                    try{
+                        const frag = document.getElementById('question-fragment');
+                        if(!frag) return;
+                        frag.classList.remove('loading');
+                        const s = frag.querySelector('.loading-spinner'); if(s) s.remove();
+                    }catch(e){console && console.error && console.error(e);}            
+                }
+
+                document.body.addEventListener('htmx:beforeRequest', function(evt){
+                    try{
+                        const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
+                        // if the request targets the question fragment, show loading
+                        if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
+                            showLoading();
+                        }
+                    }catch(e){/* ignore */}
+                });
+
+                document.body.addEventListener('htmx:afterSwap', function(evt){
+                    try{
+                        const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
+                        if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
+                            hideLoading();
+                        }
+                    }catch(e){}
+                });
+
+                // also hide after settle to be safe
+                document.body.addEventListener('htmx:afterSettle', function(evt){ hideLoading(); });
+            })();
+        </script>
     <script>
             // Also update after HTMX settle to ensure DOM changes are applied
         document.body.addEventListener('htmx:afterSettle', function(){
@@ -271,9 +320,21 @@
             color: #ffc107;
             line-height: 1;
         }
+        /* Loading blur + spinner for question fragment */
+        #question-fragment.loading { filter: blur(3px); opacity: 0.9; pointer-events: none; position: relative; }
+        #question-fragment .loading-spinner {
+            position: absolute;
+            left: 50%; top: 50%; transform: translate(-50%, -50%);
+            width: 36px; height: 36px; border-radius: 50%;
+            border: 4px solid rgba(255,255,255,0.2); border-top-color: var(--primary);
+            animation: spin 800ms linear infinite; z-index: 1200;
+        }
+        @keyframes spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
     </style>
 {% endblock %}
 
+{% block head_js %}{% endblock %}
+
 {% block js %}
     <script>
 /* HTMX swap helpers: preserve scroll and container height to avoid page jumping