From c6c9588d65826b53304acdd13e2082e096508164 Mon Sep 17 00:00:00 2001
From: Sam Rolfe <samuelrolfe@gmail.com>
Date: Sun, 30 Aug 2026 15:22:31 +1000
Subject: [PATCH] Voice assistant: immediate working/waiting spinner on Send

---
 portal/templates/voice.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/portal/templates/voice.html b/portal/templates/voice.html
index 0d29998..aa44f17 100644
--- a/portal/templates/voice.html
+++ b/portal/templates/voice.html
@@ -7,15 +7,31 @@
   <div class="admin-panel">
     <div class="linkout-card stack">
       {% if error %}<div class="form-error">{{ error }}</div>{% endif %}
-      <form method="post" action="/voice">
+      <form method="post" action="/voice" onsubmit="onSend()">
         <div class="form-field">
           <label for="message">Command</label>
           <input class="text-input" id="message" name="message"
                  placeholder="e.g. what time is it, what's the weather, turn on the lights, play some music, Donald tell me a joke…"
                  value="{{ command or '' }}" required>
         </div>
-        <button class="button button-primary width-full" type="submit">Send</button>
+        <button class="button button-primary width-full" type="submit" id="sendBtn">Send</button>
       </form>
+      <div id="waiting" class="waiting">
+        <span class="spinner"></span> Working — asking Jervis…
+      </div>
+      <style>
+        .waiting { display: none; align-items: center; gap: 8px; margin-top: 14px; color: #555; font: var(--type-body-sm); }
+        .spinner { width: 16px; height: 16px; border: 2px solid #d7d7d7; border-top-color: var(--primary, #0075de); border-radius: 50%; animation: spin .7s linear infinite; flex: none; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+      </style>
+      <script>
+        function onSend() {
+          var b = document.getElementById('sendBtn');
+          if (b) { b.disabled = true; b.textContent = 'Sending…'; }
+          var w = document.getElementById('waiting');
+          if (w) { w.style.display = 'flex'; }
+        }
+      </script>
       {% if reply %}
       <div class="linkout-card stack" style="margin-top:16px">
         <strong>Jervis:</strong>