diff --git a/apps/code/src/renderer/features/sessions/components/CloudInitializingView.tsx b/apps/code/src/renderer/features/sessions/components/CloudInitializingView.tsx index 101900c6c..92185dffe 100644 --- a/apps/code/src/renderer/features/sessions/components/CloudInitializingView.tsx +++ b/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 ( - - - - ); - } - - return ( - -
- -
- - - - {heading} - - - {subtitle} - - -
- ); + return ; } diff --git a/apps/code/src/renderer/features/sessions/components/ConversationView.tsx b/apps/code/src/renderer/features/sessions/components/ConversationView.tsx index 4afb50fd6..dd63a93bf 100644 --- a/apps/code/src/renderer/features/sessions/components/ConversationView.tsx +++ b/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 && } { + const timer = setTimeout(() => setRevealed(true), REVEAL_DELAY_MS); + return () => clearTimeout(timer); + }, []); + + if (!revealed) { + return ( + + + + ); + } + + return ( + +
+ +
+ + + + {heading} + + + {subtitle} + + +
+ ); +} diff --git a/apps/code/src/renderer/features/sessions/components/MessagesSkeleton.tsx b/apps/code/src/renderer/features/sessions/components/MessagesSkeleton.tsx new file mode 100644 index 000000000..adf0a7b7c --- /dev/null +++ b/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 ( + +
+ + ); +} + +function AssistantLines({ widths }: { widths: string[] }) { + return ( + + {widths.map((w) => ( +
+ ))} + + ); +} + +export function MessagesSkeleton() { + return ( +
+
+ + + + +
+
+ ); +} diff --git a/apps/code/src/renderer/features/sessions/components/SessionView.tsx b/apps/code/src/renderer/features/sessions/components/SessionView.tsx index b95675e7d..542555cfc 100644 --- a/apps/code/src/renderer/features/sessions/components/SessionView.tsx +++ b/apps/code/src/renderer/features/sessions/components/SessionView.tsx @@ -509,18 +509,8 @@ export function SessionView({ - ) : isInitializing ? ( - isCloud ? ( - - ) : ( - - - - ) + ) : isInitializing && isCloud ? ( + ) : ( <>