Show a loading skeleton in the sidebar until the tool registry arrives

Before the /api/tools response lands, the sidebar rendered its empty
state: a "0 of 0 on" count and no rows, which flashed for a moment on
every load (longer on the deployed Space). Distinguish loading from
empty: hide the count (screen readers get a loading note) and render
placeholder rows mirroring the loaded layout. The skeleton appears only
on the true first load; model-switch refetches keep the old list and
fetch failures still show the error message.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/components/chat-shell.tsx

@@ -498,6 +498,7 @@ export function ChatShell() {
         {!sidebarCollapsed ? (
           <div className="hidden lg:block lg:h-full lg:min-h-0">
             <SourceSidebar
+              loading={tools.length === 0 && !sourceError}
               onNewChat={handleNewChat}
               onToggleSource={toggleSource}
               onToggleTool={toggleTool}
@@ -519,6 +520,7 @@ export function ChatShell() {
             />
             <div className="absolute inset-y-0 left-0 w-[300px] max-w-[85vw] p-2">
               <SourceSidebar
+                loading={tools.length === 0 && !sourceError}
                 onNewChat={() => {
                   handleNewChat();
                   setSidebarOpen(false);

frontend/components/source-sidebar.tsx

@@ -36,6 +36,7 @@ type SourceSidebarProps = {
   tools: TutorTool[];
   onClose?: () => void;
   onCollapse?: () => void;
+  loading?: boolean;
 };
 
 type ToggleToolMeta = {
@@ -73,6 +74,7 @@ export function SourceSidebar({
   tools,
   onClose,
   onCollapse,
+  loading = false,
 }: SourceSidebarProps) {
   const retrievalTool = tools.find(
     (tool): tool is Extract<TutorTool, { kind: "configurable" }> =>
@@ -170,12 +172,16 @@ export function SourceSidebar({
                 Tools
               </span>
             </div>
-            <span
-              className="eyebrow text-[10.5px] text-[var(--muted)]"
-              title={`${activeCount} of ${totalCount} tools on`}
-            >
-              {activeCount} of {totalCount} on
-            </span>
+            {loading ? (
+              <span className="sr-only">Loading tools and sources</span>
+            ) : (
+              <span
+                className="eyebrow text-[10.5px] text-[var(--muted)]"
+                title={`${activeCount} of ${totalCount} tools on`}
+              >
+                {activeCount} of {totalCount} on
+              </span>
+            )}
           </div>
           <p className="text-[11px] leading-[1.4] text-[var(--muted)]">
             Toggle tools, pick sources.
@@ -183,6 +189,7 @@ export function SourceSidebar({
         </div>
 
         <div className="scrollbar-thin min-h-0 flex-1 space-y-2 overflow-y-auto pr-0.5">
+          {loading ? <SidebarSkeleton /> : null}
           {retrievalTool ? (
             <RetrievalTool
               tool={retrievalTool}
@@ -235,6 +242,23 @@ export function SourceSidebar({
   );
 }
 
+function SidebarSkeleton() {
+  return (
+    <div aria-hidden className="space-y-2">
+      <div className="h-[38px] animate-pulse rounded-lg border border-[var(--line)] bg-[var(--surface-subtle)]" />
+      <div className="ml-[11px] space-y-1.5 border-l border-[var(--line)] pl-3">
+        {Array.from({ length: 7 }).map((_, index) => (
+          <div
+            key={index}
+            className="h-[31px] animate-pulse rounded-lg border border-[var(--line)] bg-[var(--surface-soft)]"
+            style={{ animationDelay: `${index * 90}ms` }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function RetrievalTool({
   isOpen,
   onOpenChange,