Skip to content

Show editor immediately while WASM compiler loads #16751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mossaka merged 1 commit into from
Feb 19, 2026
Merged

Show editor immediately while WASM compiler loads #16751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions docs/public/editor/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ let isReady = false;
let isCompiling = false;
let compileTimer = null;
let currentYaml = '';
let pendingCompile = false;
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.

// ---------------------------------------------------------------
// Theme (uses Primer's data-color-mode)
Expand Down Expand Up @@ -187,8 +188,12 @@ const editorView = new EditorView({
run: () => { doCompile(); return true; }
}]),
EditorView.updateListener.of(update => {
if (update.docChanged && isReady) {
scheduleCompile();
if (update.docChanged) {
if (isReady) {
scheduleCompile();
} else {
pendingCompile = true;
}
}
}),
],
Expand Down Expand Up @@ -488,6 +493,18 @@ document.addEventListener('touchend', () => {
// Initialize compiler
// ---------------------------------------------------------------
async function init() {
// Hide the loading overlay immediately — the editor is already visible
loadingOverlay.classList.add('hidden');
Copy link

Copilot AI Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
loadingOverlay.classList.add('hidden');

Copilot uses AI. Check for mistakes.

// Show compiler-loading status in the header badge
setStatus('loading', 'Loading compiler...');

// Show a helpful placeholder in the output panel while WASM downloads
outputPlaceholder.textContent = 'Compiler loading... You can start editing!';

// Kick off deep-link / sample loading (works before WASM is ready)
loadFromHash();

try {
compiler = createWorkerCompiler({
workerUrl: '/gh-aw/wasm/compiler-worker.js'
Expand All @@ -496,18 +513,12 @@ async function init() {
await compiler.ready;
isReady = true;
setStatus('ready', 'Ready');
loadingOverlay.classList.add('hidden');

// Load from hash deep-link, or compile default content
const loaded = await loadFromHash();
if (!loaded) {
doCompile();
}
// Compile whatever the user has typed (or the default/deep-linked content)
doCompile();
} catch (err) {
setStatus('error', 'Failed to load');
loadingOverlay.querySelector('.f4').textContent = 'Failed to load compiler';
loadingOverlay.querySelector('.f6').textContent = err.message;
loadingOverlay.querySelector('.loading-spinner').style.display = 'none';
outputPlaceholder.textContent = `Failed to load compiler: ${err.message}`;
}
}

Expand Down
4 changes: 2 additions & 2 deletions docs/public/editor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@
</head>
<body class="color-bg-default color-fg-default">
<div class="d-flex flex-column" style="height: 100vh; width: 100vw;" id="app">
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<!-- Loading Overlay (hidden by default — editor is shown immediately) -->
<div class="loading-overlay hidden" id="loadingOverlay">
<div class="loading-spinner"></div>
<div class="f4 color-fg-muted mb-1">Loading gh-aw compiler...</div>
<div class="f6 color-fg-subtle">Downloading WebAssembly module (~17 MB)</div>
Expand Down