FE-778: Dim the code editor loading label and left-align it inline

[kube]

Summary

Before this PR, a code editor showed a full-strength "Loading..." label while Monaco loaded, centered in the box. In an inline expression cell the centered label jumped to the left once the editor mounted, and in both shapes it read as content rather than as a wait.

Both placeholders now share one dimmed element: left-aligned and vertically centered in an inline editor, centered in a block editor. Monaco's own loading state renders the same element, so the label does not change between the module load and the editor mount.

Before

9628-before.mp4

After

9628-after.mp4

Links

• Ticket FE-778

Changes

• One loading element for both waits

  CodeEditor passes its Suspense fallback to Monaco's loading prop, so the module load and the editor mount show the same label.

• Inline label sits at the left, block label stays centered

  Both fill their box and render at 0.3 opacity.

Review fixes

• Placeholder waits for the editor mount

  Monaco's loading label and the inline placeholder sat at the same inset until the editor mounted; the placeholder now renders only after onMount.

Test coverage

• Existing @hashintel/petrinaut unit suite
• code-editor.test.tsx:

  The inline placeholder is absent while a stand-in editor shows its loading label and appears once it mounts.

How to test

• Open Petrinaut preview on Vercel
• Menu > Load example > SIR Epidemic Model
• Throttle the network in the developer tools
• Select a transition, open its lambda code

  Expect a dimmed centered "Loading..." label until the editor mounts

• Viewport controls > Settings > General > Ad-hoc scenarios
• Bottom bar > diagnostics > Simulation Settings tab, open a place's count cell

  Expect a dimmed "Loading..." label at the left of the cell until the editor mounts

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 9, 2026 5:07pm UTC
petrinaut	Ready	Preview	Sep 9, 2026 5:07pm UTC
petrinaut-docs	Ready	Preview	Sep 9, 2026 5:07pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 9, 2026 5:07pm UTC

[cursor]

PR Summary

Low Risk
UI-only loading/placeholder timing and styling in the Monaco wrapper, covered by a new unit test.

Overview
Improves how Petrinaut’s CodeEditor looks while Monaco is still loading, so the wait state doesn’t read like real content or jump when the editor appears.

Loading label: Suspense fallback and Monaco’s loading prop now share the same element (loading={fallback}), styled at 0.3 opacity and full width. Block editors keep a centered label; single-line editors use a left-aligned label at the same inset as typed text (12px), avoiding the old center-to-left jump.

Placeholder: Inline placeholders render only after onMount (editorMounted), so they no longer stack on top of Monaco’s loading label at the same position.

Tests: New code-editor.test.tsx asserts the placeholder is hidden during fake editor loading and visible after mount.

^{Reviewed by Cursor Bugbot for commit bdad29b. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 8ba14ed. Configure here.}

[Copilot]

🟢 Approval recommended

The focused styling and lifecycle changes are consistent, covered by a targeted test, and include the required changeset.

Pull request overview

Updates Petrinaut’s Monaco editor loading state for smoother, clearer presentation.

Changes:

• Shares one loading element across module loading and editor mounting.
• Dims loading labels and left-aligns inline-editor labels.
• Tests placeholder visibility during mounting.
• Relevant user docs do not describe loading presentation, so no update is needed.

File summaries

File	Description
code-editor.tsx	Updates loading styles and mount-state handling.
code-editor.test.tsx	Tests loading-to-placeholder behavior.
.changeset/code-editor-loading-label.md	Adds the required patch changeset.

Review details

• Files reviewed: 3/3 changed files
• Comments generated: 0
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.