diff --git a/templates/interviews/interview_detail.html b/templates/interviews/interview_detail.html
index b098c8c..cc9e760 100644
--- a/templates/interviews/interview_detail.html
+++ b/templates/interviews/interview_detail.html
@@ -526,7 +526,7 @@
                     <div class="d-flex gap-2">
                         <div class="dropdown">
                             <button class="btn btn-main-action btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <i class="fas fa-magic me-1"></i> {% trans "AI Actions" %}
+                                <i class="fas fa-magic me-1"></i> {% trans "Generate AI questions" %}
                             </button>
                             
                             <ul class="dropdown-menu dropdown-menu-end shadow-sm">
@@ -1089,5 +1089,33 @@ async function copyJoinUrl(){
     }
 }
 
+document.addEventListener('DOMContentLoaded', function() {
+    const aiForm = document.getElementById('aiGenForm');
+    const aiBtn = document.getElementById('aiGenBtn');
+    const aiMainToggle = document.getElementById('aiDropdown');
+
+    if (aiForm) {
+        aiForm.addEventListener('submit', function() {
+            // 1. Disable the button to prevent multiple requests
+            aiBtn.disabled = true;
+            
+            // 2. Change the inner HTML to show a spinner
+            aiBtn.innerHTML = `
+                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                {% trans "Generating..." %}
+            `;
+
+            // 3. Update the main visible toggle button to show loading state too
+            if (aiMainToggle) {
+                aiMainToggle.classList.add('disabled');
+                aiMainToggle.innerHTML = `
+                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                    {% trans "AI Working..." %}
+                `;
+            }
+        });
+    }
+});
+
 </script>
 {% endblock %}