fix(desktop): ensure Monaco editor loads syntax highlighting reliably

Merged
KI
10mo ago
+55-6

Summary

  • Fix race condition where Monaco editor would render before theme was registered
  • Add useMonacoReady hook to allow components to wait for Monaco initialization
  • DiffViewer now properly waits for Monaco to be ready before rendering

Problem

When opening files in the diff viewer, syntax highlighting would sometimes not load immediately. This was caused by:

  1. MonacoProvider rendering children immediately without waiting for Monaco initialization
  2. Theme definition happening asynchronously via monacoPromise.then(), but DiffEditor already trying to use SUPERSET_THEME before it was registered
  3. Theme store starting with monacoTheme: null until hydration, causing the first render to skip theme registration

Solution

  • Added MonacoContext with isReady state to track full initialization
  • Provider now waits for both Monaco initialization AND theme availability before setting isReady: true
  • Exposed useMonacoReady() hook for consumers to check readiness
  • DiffViewer uses the hook to show loading state until Monaco is fully ready

Test plan

  • Open a file in the diff viewer
  • Verify syntax highlighting loads immediately (no delay/flicker)
  • Switch between files and verify highlighting persists
  • Change theme and verify editor updates correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes
    • Improved Monaco editor initialization handling by adding a readiness check before rendering the diff viewer. Users will now see a loading state while the editor initializes, preventing potential rendering issues during startup.

✏️ Tip: You can customize this high-level summary in your review settings.