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

[Kitenite]

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.}

[coderabbitai]

Warning

Rate limit exceeded

@Kitenite has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 25 minutes and 11 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 6a0ea59 and b8b3fbc.

📒 Files selected for processing (2)

• apps/desktop/src/renderer/contexts/MonacoProvider.tsx (2 hunks)
• apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/ChangesContent/components/DiffViewer/DiffViewer.tsx (4 hunks)

Walkthrough

Adds Monaco readiness tracking through a new useMonacoReady() hook. The MonacoProvider now manages an isReady state that tracks when Monaco initialization completes, exposing this via context. The DiffViewer component uses this hook to conditionally render a loading state until Monaco is ready, preventing premature editor mounting.

Changes

Cohort / File(s)	Summary
Monaco readiness state and context apps/desktop/src/renderer/contexts/MonacoProvider.tsx	Added isReady state to track Monaco initialization completion. Created MonacoContext to provide readiness status to descendants. Implemented two effects: one waits for monacoTheme before marking isReady true with cancellation handling; the other re-applies theme when isReady changes. Introduced new public hook useMonacoReady(): boolean.
Re-export new hook apps/desktop/src/renderer/contexts/index.ts	Added useMonacoReady to the module's re-export block alongside existing exports.
Conditional editor rendering apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/ChangesContent/components/DiffViewer/DiffViewer.tsx	Integrated useMonacoReady() hook to check Monaco readiness. Renders a loading indicator if Monaco is not ready; otherwise proceeds with DiffEditor as before.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Homogeneous changes following a consistent pattern across files
• Straightforward state management with clear initialization flow
• Pay attention to the effect cleanup logic and cancellation handling in MonacoProvider to ensure state updates are prevented after unmount

Possibly related PRs

• Disable linting error in monaco #402: Modifies Monaco initialization in MonacoProvider.tsx; related through shared context of Monaco configuration and setup.
• feat(desktop): add editable Monaco diff view for uncommitted changes #387: Modifies DiffViewer component with editable/onSave behavior; shares the same editor component affected by readiness gating in this PR.

Poem

🐰 Monaco waits, now the hook knows when,
DiffViewer checks, "Are you ready, my friend?"
No premature editors dancing about,
Just a patient loader with nary a doubt! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(desktop): ensure Monaco editor loads syntax highlighting reliably' directly aligns with the PR's primary objective of fixing a race condition that caused delayed syntax highlighting.
Description check	✅ Passed	The PR description includes a comprehensive summary, problem analysis, solution overview, and test plan, but does not fully follow the template structure with explicit sections for Related Issues, Type of Change, Testing, Screenshots, and Additional Notes.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

Service	Status
Database (Neon)	✅

Thank you for your contribution! 🎉

---

Preview resources have been processed for cleanup