Show editor immediately while WASM compiler loads#16751
Conversation
Instead of blocking the entire UI with a loading overlay during the 5-10s WASM download, show the CodeMirror editor right away so users can start typing within ~0.5s. The compiler status badge and output placeholder indicate loading progress, and any edits made before the compiler is ready are compiled automatically once it loads. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This pull request improves the user experience of the gh-aw Playground editor by removing the blocking full-page loading overlay and showing the CodeMirror editor immediately while the WASM compiler loads in the background. Users can now start typing within ~0.5 seconds instead of waiting 5-10 seconds for the WASM module to download.
Changes:
- The loading overlay is hidden by default, allowing the editor to be visible immediately on page load
- Loading status is displayed via a status badge and output placeholder message during WASM download
- Editor changes made before WASM is ready trigger automatic compilation once the compiler loads
- Error handling updated to display failures in the output placeholder instead of the loading overlay
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| docs/public/editor/index.html | Add hidden class to loading overlay so it's hidden by default instead of showing during WASM load |
| docs/public/editor/editor.js | Refactor initialization to show editor immediately, track pre-compiler edits via pendingCompile flag, and display loading status while WASM downloads in background |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let isCompiling = false; | ||
| let compileTimer = null; | ||
| let currentYaml = ''; | ||
| let pendingCompile = false; |
There was a problem hiding this comment.
The pendingCompile flag is declared but never actually used. It's set to true on line 195 when the document changes before the compiler is ready, but it's never checked anywhere in the code. Since doCompile() is called unconditionally on line 518 after the compiler is ready, it will compile whatever content is in the editor at that time (whether it was edited or not), making this flag unnecessary. Consider removing this unused variable to reduce code complexity.
| // --------------------------------------------------------------- | ||
| async function init() { | ||
| // Hide the loading overlay immediately — the editor is already visible | ||
| loadingOverlay.classList.add('hidden'); |
There was a problem hiding this comment.
This line adds the hidden class to the loading overlay, but the overlay already has this class in the HTML (line 130 of index.html). While this is harmless and could be considered defensive programming, it's technically redundant. Consider removing this line since the overlay is already hidden by default.
| loadingOverlay.classList.add('hidden'); |
Summary
Before
After
Changes
docs/public/editor/index.htmlhiddenclass so it never flashes on screendocs/public/editor/editor.jspendingCompileflag to track edits made before WASM is readyEditorView.updateListenerto set the flag instead of no-oping when!isReadyinit()to hide overlay immediately, show loading status, and compile on WASM readyTest plan
#issue-triage) still works🤖 Generated with Claude Code