feat: add sidebar loader for thread lists

Author: Dimillian

src/App.tsx

@@ -133,6 +133,7 @@ function MainApp() {
     approvals,
     threadsByWorkspace,
     threadStatusById,
+    threadListLoadingByWorkspace,
     activeTurnIdByThread,
     tokenUsageByThread,
     rateLimitsByWorkspace,
@@ -321,6 +322,7 @@ function MainApp() {
         workspaces={workspaces}
         threadsByWorkspace={threadsByWorkspace}
         threadStatusById={threadStatusById}
+        threadListLoadingByWorkspace={threadListLoadingByWorkspace}
         activeWorkspaceId={activeWorkspaceId}
         activeThreadId={activeThreadId}
         accountRateLimits={activeRateLimits}

src/components/Sidebar.tsx

@@ -11,6 +11,7 @@ type SidebarProps = {
     string,
     { isProcessing: boolean; hasUnread: boolean; isReviewing: boolean }
   >;
+  threadListLoadingByWorkspace: Record<string, boolean>;
   activeWorkspaceId: string | null;
   activeThreadId: string | null;
   accountRateLimits: RateLimitSnapshot | null;
@@ -28,6 +29,7 @@ export function Sidebar({
   workspaces,
   threadsByWorkspace,
   threadStatusById,
+  threadListLoadingByWorkspace,
   activeWorkspaceId,
   activeThreadId,
   accountRateLimits,
@@ -134,6 +136,10 @@ export function Sidebar({
             const threads = threadsByWorkspace[entry.id] ?? [];
             const isCollapsed = entry.settings.sidebarCollapsed;
             const showThreads = !isCollapsed && threads.length > 0;
+            const isLoadingThreads =
+              threadListLoadingByWorkspace[entry.id] ?? false;
+            const showThreadLoader =
+              !isCollapsed && isLoadingThreads && threads.length === 0;
 
             return (
               <div key={entry.id} className="workspace-card">
@@ -274,6 +280,13 @@ export function Sidebar({
                     )}
                   </div>
                 )}
+                {showThreadLoader && (
+                  <div className="thread-loading" aria-label="Loading agents">
+                    <span className="thread-skeleton thread-skeleton-wide" />
+                    <span className="thread-skeleton" />
+                    <span className="thread-skeleton thread-skeleton-short" />
+                  </div>
+                )}
               </div>
             );
           })}

src/hooks/useThreads.ts

@@ -37,6 +37,7 @@ type ThreadState = {
     string,
     { isProcessing: boolean; hasUnread: boolean; isReviewing: boolean }
   >;
+  threadListLoadingByWorkspace: Record<string, boolean>;
   activeTurnIdByThread: Record<string, string | null>;
   approvals: ApprovalRequest[];
   tokenUsageByThread: Record<string, ThreadTokenUsage>;
@@ -67,6 +68,11 @@ type ThreadAction =
   | { type: "appendReasoningContent"; threadId: string; itemId: string; delta: string }
   | { type: "appendToolOutput"; threadId: string; itemId: string; delta: string }
   | { type: "setThreads"; workspaceId: string; threads: ThreadSummary[] }
+  | {
+      type: "setThreadListLoading";
+      workspaceId: string;
+      isLoading: boolean;
+    }
   | { type: "addApproval"; approval: ApprovalRequest }
   | { type: "removeApproval"; requestId: number }
   | { type: "setThreadTokenUsage"; threadId: string; tokenUsage: ThreadTokenUsage }
@@ -84,6 +90,7 @@ const initialState: ThreadState = {
   itemsByThread: emptyItems,
   threadsByWorkspace: {},
   threadStatusById: {},
+  threadListLoadingByWorkspace: {},
   activeTurnIdByThread: {},
   approvals: [],
   tokenUsageByThread: {},
@@ -483,6 +490,14 @@ function threadReducer(state: ThreadState, action: ThreadAction): ThreadState {
         },
       };
     }
+    case "setThreadListLoading":
+      return {
+        ...state,
+        threadListLoadingByWorkspace: {
+          ...state.threadListLoadingByWorkspace,
+          [action.workspaceId]: action.isLoading,
+        },
+      };
     case "setThreadTokenUsage":
       return {
         ...state,
@@ -1447,6 +1462,11 @@ export function useThreads({
 
   const listThreadsForWorkspace = useCallback(
     async (workspace: WorkspaceInfo) => {
+      dispatch({
+        type: "setThreadListLoading",
+        workspaceId: workspace.id,
+        isLoading: true,
+      });
       onDebug?.({
         id: `${Date.now()}-client-thread-list`,
         timestamp: Date.now(),
@@ -1527,6 +1547,12 @@ export function useThreads({
           label: "thread/list error",
           payload: error instanceof Error ? error.message : String(error),
         });
+      } finally {
+        dispatch({
+          type: "setThreadListLoading",
+          workspaceId: workspace.id,
+          isLoading: false,
+        });
       }
     },
     [onDebug],
@@ -1808,6 +1834,7 @@ export function useThreads({
     approvals: state.approvals,
     threadsByWorkspace: state.threadsByWorkspace,
     threadStatusById: state.threadStatusById,
+    threadListLoadingByWorkspace: state.threadListLoadingByWorkspace,
     activeTurnIdByThread: state.activeTurnIdByThread,
     tokenUsageByThread: state.tokenUsageByThread,
     rateLimitsByWorkspace: state.rateLimitsByWorkspace,

src/styles/sidebar.css

@@ -186,7 +186,36 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  margin-left: 12px;
+  margin-left: 0;
+}
+
+.thread-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px 6px 4px;
+}
+
+.thread-skeleton {
+  height: 8px;
+  width: 62%;
+  border-radius: 999px;
+  background: linear-gradient(
+    110deg,
+    rgba(255, 255, 255, 0.04) 8%,
+    rgba(255, 255, 255, 0.18) 18%,
+    rgba(255, 255, 255, 0.04) 33%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+.thread-skeleton-wide {
+  width: 78%;
+}
+
+.thread-skeleton-short {
+  width: 44%;
 }
 
 .thread-row {
@@ -338,3 +367,12 @@
     opacity: 0.6;
   }
 }
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}