Problem

When the Webview loads slowly (taking more than 500ms), the INITIAL_STATE message is sent before the Webview is ready to receive it, resulting in a blank page.

Current Behavior

1. Extension Host sends INITIAL_STATE after a fixed 500ms delay
2. ❌ If Webview takes longer to initialize, the message is lost
3. ❌ User sees a blank page

Expected Behavior

1. Extension Host waits for Webview to signal readiness
2. ✅ INITIAL_STATE is sent only after Webview is fully initialized
3. ✅ User sees the editor correctly

Solution

Replace the unreliable setTimeout(500ms) approach with an explicit WEBVIEW_READY message pattern, and show a loading spinner while waiting.

Changes

File: src/webview/src/main.tsx

• Added vscode.postMessage({ type: 'WEBVIEW_READY' }) after React render completes

File: src/shared/types/messages.ts

• Added WEBVIEW_READY message type to WebviewMessage union

File: src/extension/commands/open-editor.ts

• Replaced setTimeout with message handler for WEBVIEW_READY
• Extension Host now waits for this message before sending INITIAL_STATE

File: src/webview/src/components/common/Spinner.tsx (NEW)

• Added reusable Spinner component with configurable size and thickness

File: src/webview/src/App.tsx

• Show loading spinner while waiting for INITIAL_STATE message
• Improves UX during slow initialization

Impact

• ✅ Fixes blank page issue for users with slower environments
• ✅ More reliable message timing (event-based vs time-based)
• ✅ Shows loading spinner during initialization (better UX)
• ✅ No breaking changes

Testing

• Code quality checks passed (npm run format && npm run lint && npm run check)
• Build successful (npm run build)
• Awaiting confirmation from issue reporter

Notes

• This is a tentative fix pending confirmation from the issue reporter
• Fixes installed from extension visual code. open editor and got blank page #396