From 4e70c69d108e6200443681bc961aba0135bfead5 Mon Sep 17 00:00:00 2001
From: Garry Tan <garrytan@gmail.com>
Date: Sun, 22 Mar 2026 19:24:57 -0700
Subject: [PATCH] feat: loading spinner on sidebar open while connecting to
 server

Shows an amber spinner with "Connecting..." when the sidebar first opens,
replacing the empty state. After the first successful /sidebar-chat poll:
- If chat history exists: renders it immediately
- If no history: shows the welcome message

Prevents the jarring empty-then-populated flash on sidebar open.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 extension/sidepanel.css  | 22 ++++++++++++++++++++++
 extension/sidepanel.html |  6 +++++-
 extension/sidepanel.js   | 18 +++++++++++++++++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/extension/sidepanel.css b/extension/sidepanel.css
index 54b652e8..2c69c73c 100644
--- a/extension/sidepanel.css
+++ b/extension/sidepanel.css
@@ -158,6 +158,28 @@ body::after {
   flex-direction: column;
   gap: 8px;
 }
+.chat-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  color: var(--text-meta);
+  gap: 12px;
+  font-size: 13px;
+}
+.chat-loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--amber-500);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 .chat-welcome {
   display: flex;
   flex-direction: column;
diff --git a/extension/sidepanel.html b/extension/sidepanel.html
index fff42a18..5267ae24 100644
--- a/extension/sidepanel.html
+++ b/extension/sidepanel.html
@@ -17,7 +17,11 @@
   <!-- Chat Tab (default, full height) -->
   <main id="tab-chat" class="tab-content active">
     <div class="chat-messages" id="chat-messages">
-      <div class="chat-welcome">
+      <div class="chat-loading" id="chat-loading">
+        <div class="chat-loading-spinner"></div>
+        <p>Connecting...</p>
+      </div>
+      <div class="chat-welcome" id="chat-welcome" style="display:none">
         <div class="chat-welcome-icon">G</div>
         <p>Send a message to Claude Code.</p>
         <p class="muted">Your agent will see it and act on it.</p>
diff --git a/extension/sidepanel.js b/extension/sidepanel.js
index ed7fd1e9..5011e707 100644
--- a/extension/sidepanel.js
+++ b/extension/sidepanel.js
@@ -288,6 +288,8 @@ commandInput.addEventListener('keydown', (e) => {
 sendBtn.addEventListener('click', sendMessage);
 
 // Poll for new chat messages
+let initialLoadDone = false;
+
 async function pollChat() {
   if (!serverUrl || !serverToken) return;
   try {
@@ -297,7 +299,21 @@ async function pollChat() {
     });
     if (!resp.ok) return;
     const data = await resp.json();
+
+    // First successful poll — hide loading spinner
+    if (!initialLoadDone) {
+      initialLoadDone = true;
+      const loading = document.getElementById('chat-loading');
+      const welcome = document.getElementById('chat-welcome');
+      if (loading) loading.style.display = 'none';
+      // Show welcome only if no chat history
+      if (data.total === 0 && welcome) welcome.style.display = '';
+    }
+
     if (data.entries && data.entries.length > 0) {
+      // Hide welcome on first real entry
+      const welcome = document.getElementById('chat-welcome');
+      if (welcome) welcome.style.display = 'none';
       for (const entry of data.entries) {
         addChatEntry(entry);
       }
@@ -319,7 +335,7 @@ document.getElementById('clear-chat').addEventListener('click', async () => {
   agentTextEl = null;
   agentText = '';
   chatMessages.innerHTML = `
-    <div class="chat-welcome">
+    <div class="chat-welcome" id="chat-welcome">
       <div class="chat-welcome-icon">G</div>
       <p>Send a message to Claude Code.</p>
       <p class="muted">Your agent will see it and act on it.</p>