fix(webview): add loading skeleton for view state initialization

Author: easonliang28

webview-ui/src/components/modes/ModesView.tsx

@@ -77,6 +77,7 @@ const ModesView = () => {
 		setCustomInstructions,
 		customModes,
 		mcpServers,
+		viewStateLoaded,
 	} = useExtensionState()
 
 	// Use a local state to track the visually active mode
@@ -613,6 +614,17 @@ const ModesView = () => {
 		})
 	}
 
+	if (viewStateLoaded === false) {
+		return (
+			<div data-testid="modes-view-loading-skeleton" className="p-4" aria-busy="true">
+				<div className="mb-4 h-7 w-24 animate-pulse rounded bg-vscode-input-background" />
+				<div className="mb-3 h-8 w-full animate-pulse rounded bg-vscode-input-background" />
+				<div className="mb-4 h-16 w-full animate-pulse rounded bg-vscode-input-background" />
+				<div className="mb-4 h-16 w-full animate-pulse rounded bg-vscode-input-background" />
+			</div>
+		)
+	}
+
 	return (
 		<div>
 			<Section>

webview-ui/src/components/modes/__tests__/ModesView.spec.tsx

@@ -26,6 +26,8 @@ const mockExtensionState = {
 	currentApiConfigName: "",
 	customInstructions: "Initial instructions",
 	setCustomInstructions: vitest.fn(),
+	viewStateLoaded: true,
+	setViewStateLoaded: vitest.fn(),
 }
 
 const renderPromptsView = (props = {}) => {
@@ -43,6 +45,19 @@ describe("PromptsView", () => {
 		vitest.clearAllMocks()
 	})
 
+	it("shows a loading skeleton while view-local state is initializing", () => {
+		renderPromptsView({
+			viewStateLoaded: false,
+			mode: "debug",
+			currentApiConfigName: "stale-global-profile",
+		})
+
+		expect(screen.getByTestId("modes-view-loading-skeleton")).toBeInTheDocument()
+		expect(screen.queryByTestId("mode-select-trigger")).not.toBeInTheDocument()
+		expect(screen.queryByText("Debug")).not.toBeInTheDocument()
+		expect(screen.queryByText("stale-global-profile")).not.toBeInTheDocument()
+	})
+
 	it("displays the current mode name in the select trigger", () => {
 		renderPromptsView({ mode: "code" })
 		const selectTrigger = screen.getByTestId("mode-select-trigger")

webview-ui/src/context/ExtensionStateContext.tsx

@@ -36,6 +36,8 @@ import { convertTextMateToHljs } from "@src/utils/textMateToHljs"
 export interface ExtensionStateContextType extends ExtensionState {
 	historyPreviewCollapsed?: boolean // Add the new state property
 	didHydrateState: boolean
+	viewStateLoaded: boolean
+	setViewStateLoaded: (value: boolean) => void
 	showWelcome: boolean
 	theme: any
 	mcpServers: McpServer[]
@@ -274,6 +276,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
+	const [viewStateLoaded, setViewStateLoaded] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
 	const [theme, setTheme] = useState<any>(undefined)
 	const [filePaths, setFilePaths] = useState<string[]>([])
@@ -319,6 +322,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					setState((prevState) => mergeExtensionState(prevState, newState))
 					setShowWelcome(!checkExistKey(newState.apiConfiguration))
 					setDidHydrateState(true)
+					setViewStateLoaded(true)
 					// Update alwaysAllowFollowupQuestions if present in state message
 					if ((newState as any).alwaysAllowFollowupQuestions !== undefined) {
 						setAlwaysAllowFollowupQuestions((newState as any).alwaysAllowFollowupQuestions)
@@ -513,6 +517,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		chatFontSize: state.chatFontSize ?? undefined,
 		reasoningBlockCollapsed: state.reasoningBlockCollapsed ?? true,
 		didHydrateState,
+		viewStateLoaded,
+		setViewStateLoaded,
 		showWelcome,
 		theme,
 		mcpServers,

webview-ui/src/context/__tests__/ExtensionStateContext.spec.tsx

@@ -13,20 +13,31 @@ import {
 import { ExtensionStateContextProvider, useExtensionState, mergeExtensionState } from "../ExtensionStateContext"
 
 const TestComponent = () => {
-	const { allowedCommands, setAllowedCommands, soundEnabled, showRooIgnoredFiles, setShowRooIgnoredFiles } =
-		useExtensionState()
+	const {
+		allowedCommands,
+		setAllowedCommands,
+		soundEnabled,
+		showRooIgnoredFiles,
+		setShowRooIgnoredFiles,
+		viewStateLoaded,
+		setViewStateLoaded,
+	} = useExtensionState()
 
 	return (
 		<div>
 			<div data-testid="allowed-commands">{JSON.stringify(allowedCommands)}</div>
 			<div data-testid="sound-enabled">{JSON.stringify(soundEnabled)}</div>
 			<div data-testid="show-rooignored-files">{JSON.stringify(showRooIgnoredFiles)}</div>
+			<div data-testid="view-state-loaded">{JSON.stringify(viewStateLoaded)}</div>
 			<button data-testid="update-button" onClick={() => setAllowedCommands(["npm install", "git status"])}>
 				Update Commands
 			</button>
 			<button data-testid="toggle-rooignore-button" onClick={() => setShowRooIgnoredFiles(!showRooIgnoredFiles)}>
 				Update Commands
 			</button>
+			<button data-testid="set-view-state-loaded-button" onClick={() => setViewStateLoaded(true)}>
+				Set View State Loaded
+			</button>
 		</div>
 	)
 }
@@ -92,6 +103,55 @@ describe("ExtensionStateContext", () => {
 		expect(JSON.parse(screen.getByTestId("rules").textContent!)).toEqual([])
 	})
 
+	it("initializes with viewStateLoaded set to false", () => {
+		render(
+			<ExtensionStateContextProvider>
+				<TestComponent />
+			</ExtensionStateContextProvider>,
+		)
+
+		expect(JSON.parse(screen.getByTestId("view-state-loaded").textContent!)).toBe(false)
+	})
+
+	it("marks viewStateLoaded true after receiving initial state", () => {
+		render(
+			<ExtensionStateContextProvider>
+				<TestComponent />
+			</ExtensionStateContextProvider>,
+		)
+
+		act(() => {
+			window.dispatchEvent(
+				new MessageEvent("message", {
+					data: {
+						type: "state",
+						state: {
+							apiConfiguration: { apiProvider: "anthropic" },
+							mode: "ask",
+							currentApiConfigName: "view-local-profile",
+						},
+					},
+				}),
+			)
+		})
+
+		expect(JSON.parse(screen.getByTestId("view-state-loaded").textContent!)).toBe(true)
+	})
+
+	it("updates viewStateLoaded through setViewStateLoaded", () => {
+		render(
+			<ExtensionStateContextProvider>
+				<TestComponent />
+			</ExtensionStateContextProvider>,
+		)
+
+		act(() => {
+			screen.getByTestId("set-view-state-loaded-button").click()
+		})
+
+		expect(JSON.parse(screen.getByTestId("view-state-loaded").textContent!)).toBe(true)
+	})
+
 	it("updates rules from incoming rules message", () => {
 		render(
 			<ExtensionStateContextProvider>