From 7f464005e6d8e01998326ecd2c1797e83ab13e3a Mon Sep 17 00:00:00 2001 From: "Jiaxiao (mossaka) Zhou" Date: Thu, 19 Feb 2026 04:57:52 +0000 Subject: [PATCH] Show editor immediately while WASM compiler loads in background 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 --- docs/public/editor/editor.js | 33 ++++++++++++++++++++++----------- docs/public/editor/index.html | 4 ++-- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js index 654774da16d..11ff0ba76dc 100644 --- a/docs/public/editor/editor.js +++ b/docs/public/editor/editor.js @@ -135,6 +135,7 @@ let isReady = false; let isCompiling = false; let compileTimer = null; let currentYaml = ''; +let pendingCompile = false; // --------------------------------------------------------------- // Theme (uses Primer's data-color-mode) @@ -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; + } } }), ], @@ -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'); + + // 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' @@ -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}`; } } diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html index b9c208404e9..ff6158e2b18 100644 --- a/docs/public/editor/index.html +++ b/docs/public/editor/index.html @@ -126,8 +126,8 @@
- -
+ +