Polish initial loading state for task threads

apps/code/src/renderer/features/sessions/components/CloudInitializingView.tsx

@@ -1,15 +1,10 @@
-import { Spinner } from "@phosphor-icons/react";
-import { Flex, Text } from "@radix-ui/themes";
-import zenHedgehog from "@renderer/assets/images/zen.png";
 import type { TaskRunStatus } from "@shared/types";
-import { useEffect, useState } from "react";
+import { InitializingSplash } from "./InitializingSplash";
 
 interface CloudInitializingViewProps {
   cloudStatus: TaskRunStatus | null;
 }
 
-const REVEAL_DELAY_MS = 2000;
-
 function copyFor(cloudStatus: TaskRunStatus | null): {
   heading: string;
   subtitle: string;
@@ -37,45 +32,5 @@ export function CloudInitializingView({
   cloudStatus,
 }: CloudInitializingViewProps) {
   const { heading, subtitle } = copyFor(cloudStatus);
-
-  const [revealed, setRevealed] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setRevealed(true), REVEAL_DELAY_MS);
-    return () => clearTimeout(timer);
-  }, []);
-
-  if (!revealed) {
-    return (
-      <Flex
-        align="center"
-        justify="center"
-        className="absolute inset-0 bg-background"
-      >
-        <Spinner size={32} className="animate-spin text-gray-9" />
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex
-      align="center"
-      justify="center"
-      direction="column"
-      gap="5"
-      className="absolute inset-0 bg-background"
-    >
-      <div className="zen-float">
-        <img src={zenHedgehog} alt="" className="block w-[160px]" />
-      </div>
-      <Flex direction="column" align="center" gap="2">
-        <Flex align="center" gap="2">
-          <Spinner size={16} className="animate-spin text-gray-9" />
-          <Text className="font-medium text-base">{heading}</Text>
-        </Flex>
-        <Text color="gray" className="text-sm">
-          {subtitle}
-        </Text>
-      </Flex>
-    </Flex>
-  );
+  return <InitializingSplash heading={heading} subtitle={subtitle} />;
 }

apps/code/src/renderer/features/sessions/components/ConversationView.tsx

@@ -26,6 +26,7 @@ import {
 import { ConversationSearchBar } from "./ConversationSearchBar";
 import { GitActionMessage } from "./GitActionMessage";
 import { GitActionResult } from "./GitActionResult";
+import { MessagesSkeleton } from "./MessagesSkeleton";
 import { mergeConversationItems } from "./mergeConversationItems";
 import { SessionFooter } from "./SessionFooter";
 import { QueuedMessageView } from "./session-update/QueuedMessageView";
@@ -268,6 +269,7 @@ export function ConversationView({
           />
         )}
 
+        {items.length === 0 && <MessagesSkeleton />}
         <SessionTaskIdProvider taskId={taskId}>
           <VirtualizedList
             ref={listRef}

apps/code/src/renderer/features/sessions/components/InitializingSplash.tsx

@@ -0,0 +1,57 @@
+import { Spinner } from "@phosphor-icons/react";
+import { Flex, Text } from "@radix-ui/themes";
+import zenHedgehog from "@renderer/assets/images/zen.png";
+import { useEffect, useState } from "react";
+
+interface InitializingSplashProps {
+  heading: string;
+  subtitle: string;
+}
+
+const REVEAL_DELAY_MS = 2000;
+
+export function InitializingSplash({
+  heading,
+  subtitle,
+}: InitializingSplashProps) {
+  const [revealed, setRevealed] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setRevealed(true), REVEAL_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!revealed) {
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        className="absolute inset-0 bg-background"
+      >
+        <Spinner size={32} className="animate-spin text-gray-9" />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      direction="column"
+      gap="5"
+      className="absolute inset-0 bg-background"
+    >
+      <div className="zen-float">
+        <img src={zenHedgehog} alt="" className="block w-[160px]" />
+      </div>
+      <Flex direction="column" align="center" gap="2">
+        <Flex align="center" gap="2">
+          <Spinner size={16} className="animate-spin text-gray-9" />
+          <Text className="font-medium text-base">{heading}</Text>
+        </Flex>
+        <Text color="gray" className="text-sm">
+          {subtitle}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}

apps/code/src/renderer/features/sessions/components/MessagesSkeleton.tsx

@@ -0,0 +1,36 @@
+import { Flex } from "@radix-ui/themes";
+import { CHAT_CONTENT_MAX_WIDTH } from "../constants";
+
+function UserBubble({ widthClass }: { widthClass: string }) {
+  return (
+    <Flex justify="end" className="px-2 py-1.5">
+      <div className={`h-9 rounded-2xl bg-(--gray-3) ${widthClass}`} />
+    </Flex>
+  );
+}
+
+function AssistantLines({ widths }: { widths: string[] }) {
+  return (
+    <Flex direction="column" gap="2" className="px-2 py-2">
+      {widths.map((w) => (
+        <div key={w} className={`h-3 rounded-md bg-(--gray-4) ${w}`} />
+      ))}
+    </Flex>
+  );
+}
+
+export function MessagesSkeleton() {
+  return (
+    <div aria-hidden className="absolute inset-0 overflow-hidden bg-background">
+      <div
+        className="mx-auto animate-pulse pt-6"
+        style={{ maxWidth: CHAT_CONTENT_MAX_WIDTH }}
+      >
+        <UserBubble widthClass="w-1/2" />
+        <AssistantLines widths={["w-full", "w-11/12", "w-2/3"]} />
+        <UserBubble widthClass="w-1/3" />
+        <AssistantLines widths={["w-5/6", "w-full", "w-3/5", "w-2/5"]} />
+      </div>
+    </div>
+  );
+}

apps/code/src/renderer/features/sessions/components/SessionView.tsx

@@ -509,18 +509,8 @@ export function SessionView({
                   </Box>
                 </Box>
               </>
-            ) : isInitializing ? (
-              isCloud ? (
-                <CloudInitializingView cloudStatus={cloudStatus} />
-              ) : (
-                <Flex
-                  align="center"
-                  justify="center"
-                  className="absolute inset-0 bg-background"
-                >
-                  <Spinner size={32} className="animate-spin text-gray-9" />
-                </Flex>
-              )
+            ) : isInitializing && isCloud ? (
+              <CloudInitializingView cloudStatus={cloudStatus} />
             ) : (
               <>
                 <DropZoneOverlay isVisible={isDraggingFile} />