fix: show loading view with retry instead of grey screen (#11931)

[roomote-v0]

Related GitHub Issue

Closes: #11931

Description

This PR attempts to address Issue #11931 (Grey Screen). Feedback and guidance are welcome.

Root cause: When didHydrateState is false in App.tsx, the component returned null, rendering absolutely nothing -- which appears as a blank grey panel. This can happen when:

• The extension host restarts or becomes temporarily unresponsive during a session
• A race condition causes the webviewDidLaunch message to be sent before the extension is ready to respond
• The webview is moved/reloaded by VS Code and the state message never arrives

What changed: Inspired by the costrict fork (referenced in the issue), which solved this by showing a LoadingView instead of null:

1. New LoadingView component (webview-ui/src/components/LoadingView.tsx) -- Shows a spinner with "Initializing..." text instead of a blank grey screen when the webview is waiting for state hydration
2. Automatic retry mechanism -- If state is not received within 5 seconds, the component automatically re-sends the webviewDidLaunch message (up to 3 retries)
3. Manual retry button -- After 3 failed auto-retries, a "Retry Connection" button is shown so the user can manually trigger reconnection without restarting VS Code
4. Updated App.tsx -- return null replaced with return <LoadingView />
5. i18n strings -- Added initializing, retry_connection, and connection_failed keys to en/common.json

Test Procedure

• Unit tests added in webview-ui/src/components/__tests__/LoadingView.spec.tsx (5 tests, all passing)
• Existing App.spec.tsx tests continue to pass (7 tests)
• All lint and type checks pass

Manual testing steps:

1. Open Roo Code panel in VS Code
2. The loading spinner should briefly appear before the panel fully loads
3. If the extension host is slow or unresponsive, the spinner persists and auto-retries
4. After ~20 seconds of no response, a "Retry Connection" button appears

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes.
• Documentation Impact: No documentation updates are required.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Documentation Updates

• No documentation updates are required.

Additional Notes

The costrict fork (https://github.com/zgsm-ai/costrict) was referenced in the issue as having fixed this problem. Their approach was to show a branded LoadingView with a spinner. This PR takes the same approach but adds automatic retry logic and a manual retry button for cases where the initial state message is lost entirely.

Interactively review PR in Roo Code Cloud