Show inference loading state

index.html

@@ -25,6 +25,19 @@
     button:disabled { opacity: 0.5; cursor: wait; }
     textarea:focus, input:focus, button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
     #status { min-height: 34px; margin: 0; padding: 0 16px 12px; color: #6b7280; font-size: 12px; }
+    #status.loading::before {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-right: 8px;
+      vertical-align: -2px;
+      border: 2px solid #d1d5db;
+      border-top-color: #4f46e5;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
     @media (max-width: 600px) {
       form { grid-template-columns: 1fr; }
       .controls { flex-direction: row; align-items: end; justify-content: space-between; }
@@ -87,7 +100,11 @@
       addMessage("user", text);
       prompt.value = "";
       send.disabled = true;
-      status.textContent = "Waiting for model...";
+      status.classList.add("loading");
+      status.textContent = "Starting model. Cold starts can take a few minutes...";
+      const slowNotice = setTimeout(() => {
+        status.textContent = "Still waiting for the inference worker to become ready...";
+      }, 45_000);
       const output = addMessage("assistant", "");
 
       try {
@@ -122,6 +139,8 @@
         output.textContent = `Request failed: ${error.message}`;
         status.textContent = "The inference service did not complete the request.";
       } finally {
+        clearTimeout(slowNotice);
+        status.classList.remove("loading");
         send.disabled = false;
         prompt.focus();
       }