fix(webview): show modes skeleton until view state loads

- ExtensionStateContext: viewStateLoaded plumbing (context field, initial
  state, setViewStateLoaded; flipped to true on the first state message)
- ModesView: renders a loading skeleton while view-local state is
  initializing, so stale mode/profile values never flash
- App.tsx: remove the bare webviewDidLaunch postMessage useEffect
  (F1c-owned hunk from #928, folded in here because F1c landed without
  it); the payload-carrying post now lives only in ExtensionStateContext
- Tests: skeleton regression test (ModesView), viewStateLoaded lifecycle
  tests (ExtensionStateContext), getViewStateId in the App vscode mock

Upstream: #915 / PR #928 (vps2 F7)

Author: easonliang28

webview-ui/src/App.tsx

@@ -203,9 +203,6 @@ const App = () => {
 		}
 	}, [telemetrySetting, telemetryKey, machineId, vscodeTelemetryEnabled, didHydrateState])
 
-	// Tell the extension that we are ready to receive messages.
-	useEffect(() => vscode.postMessage({ type: "webviewDidLaunch" }), [])
-
 	// Initialize source map support for better error reporting
 	useEffect(() => {
 		// Initialize source maps for better error reporting in production

webview-ui/src/__tests__/App.spec.tsx

@@ -8,6 +8,7 @@ import AppWithProviders from "../App"
 vi.mock("@src/utils/vscode", () => ({
 	vscode: {
 		postMessage: vi.fn(),
+		getViewStateId: vi.fn(() => "test-view-state-id"),
 	},
 }))
 

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

@@ -38,6 +38,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[]
@@ -289,6 +291,7 @@ export const ExtensionStateContextProvider: React.FC<{
 	)
 
 	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[]>([])
@@ -345,6 +348,7 @@ export const ExtensionStateContextProvider: React.FC<{
 					setState((prevState) => mergeExtensionState(prevState, newState))
 					setShowWelcome(!checkExistKey(newState.apiConfiguration, newState.zooCodeIsAuthenticated))
 					setDidHydrateState(true)
+					setViewStateLoaded(true)
 					// Update alwaysAllowFollowupQuestions if present in state message
 					if ((newState as any).alwaysAllowFollowupQuestions !== undefined) {
 						setAlwaysAllowFollowupQuestions((newState as any).alwaysAllowFollowupQuestions)
@@ -539,6 +543,8 @@ export const ExtensionStateContextProvider: React.FC<{
 		chatFontSize: state.chatFontSize ?? undefined,
 		reasoningBlockCollapsed: state.reasoningBlockCollapsed ?? true,
 		didHydrateState,
+		viewStateLoaded,
+		setViewStateLoaded,
 		showWelcome,
 		theme,
 		mcpServers,

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

@@ -25,20 +25,31 @@ vi.mock("@src/utils/vscode", () => ({
 }))
 
 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>
 	)
 }
@@ -223,6 +234,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: providerIdentifiers.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>