[UX] Flash of incorrect mode/apiConfig when opening new editor tab

[easonLiangWorldedtech]

[UX] Flash of incorrect mode/apiConfig when opening new editor tab

Problem

When a user opens a new Roo Code editor tab, the webview briefly displays stale global state before loadViewState() completes and updates to the correct view-local state. This causes a visible "flash" or flicker.

Evidence

Code locations:

• ClineProvider.ts:456: await this.loadViewState() — async operation in constructor
• ClineProvider.ts:3079: postStateToWebview() called in constructor before loadViewState() completes
• ExtensionStateContext.tsx:492-496: webviewDidLaunch handshake triggers setViewStateId(), which calls loadViewState()

Reproduction:

1. Tab A (sidebar) has mode = "architect" saved in view-local state
2. Open new Tab B (editor) — it starts with global default mode = "code"
3. Webview displays "code" briefly
4. loadViewState() completes → viewLocalState.mode = "code" (or whatever was persisted for this tab)
5. postStateToWebview() updates UI to correct value
6. User sees a flash/flicker between step 3 and step 5

Root Cause

loadViewState() is an async operation that runs after the webview has already been mounted and received its first state push via postStateToWebview(). There's no loading indicator or skeleton UI to mask this transition.

Proposed Fix

1. Add a viewStateLoaded flag to ExtensionStateContext:

   interface ExtensionStateContextType {
       // ... existing fields
       viewStateLoaded: boolean  // New field
       setViewStateLoaded: (value: boolean) => void
   }

2. Set viewStateLoaded = true after loadViewState() completes in setViewStateId().

3. In SettingsView or mode selector, show a loading skeleton or spinner when !viewStateLoaded:

   {!viewStateLoaded ? (
       <Skeleton className="h-8 w-24" />
   ) : (
       <ModeSelector value={mode} onChange={setMode} />
   )}

4. Alternatively: Debounce the initial postStateToWebview() call until after loadViewState() completes, but this may delay UI rendering.

Scope

• Impact: All new tab openings — especially noticeable when view-local state differs from global default
• Risk: Low-Medium — adding loading skeleton is safe; debouncing may affect perceived responsiveness
• Priority: Medium (affects first impression of parallel mode)

Related

• PR fix(webview): isolate parallel provider view state #909: fix(webview): isolate parallel provider view state #909
• Main tracking issue: [UX] Multi-tab mode isolation — follow-up issues from PR #909 #913

[easonLiangWorldedtech]

Superseded by the vps2 tracking issue easonLiangWorldedtech#41 — parked as F7 (skeleton port) in the vps2 series; the flash is documented in #41 until the skeleton lands.