Feat: Improve status on terminal for demo.

Author: dylan-sutton-chavez

demo/index.html

@@ -62,7 +62,7 @@ <h1 class="font-semibold">Edge Python Playground</h1>
             <header class="bg-[#1c1c1c] border-[#2d2d2d] flex justify-between items-center">
                 <div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
                     <span class="px-3 py-2">
-                        <p aria-hidden="true">editor</p>
+                        <p aria-hidden="true">Editor</p>
                     </span>
 
                     <span class="px-1.5 py-0.5 ml-auto">
@@ -94,8 +94,8 @@ <h1 class="font-semibold">Edge Python Playground</h1>
             <header class="bg-[#1c1c1c] border-b border-[#2d2d2d] px-3 py-2 flex justify-between items-center">
                 <div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
                     <h2 class="sr-only">Terminal</h2>
-                    <p aria-hidden="true">terminal</p>
-                    <span id="status" role="status" class="ml-auto text-[#525252]">loading wasm…</span>
+                    <p aria-hidden="true">Terminal</p>
+                    <span id="status" role="status" class="ml-auto text-[#525252]">Loading WASM...</span>
                 </div>
             </header>
 

demo/main.js

@@ -29,29 +29,37 @@ const instantiate = async (url) => {
 };
 
 const loadWasm = async () => {
-    setStatus('loading wasm…', CLS.ok);
+    setStatus('Loading WASM...', CLS.ok);
     try {
         const [{ instance }, t] = await time(() => Promise.any(WASM_SOURCES.map(instantiate)));
         wasm = instance.exports;
         btn.disabled = false;
-        setStatus(`ready (${t}${DEV ? ' · dev' : ''})`);
+        setStatus(`Ready (${t}${DEV ? ' · Dev' : ''})`);
     } catch (err) {
-        setStatus('load failed', CLS.err);
-        term.textContent = `Could not load wasm.\n\n${err.errors.map(e => e.message).join(' | ')}`;
+        setStatus('Load failed', CLS.err);
+        term.textContent = `Could not load WASM.\n\n${err.errors.map(e => e.message).join(' | ')}`;
     }
 };
 
 const runCode = async () => {
     if (!wasm) return;
     const srcBytes = new TextEncoder().encode(ed.value);
-    if (srcBytes.length > SZ) return void (term.textContent = `error: source exceeds ${SZ} bytes`);
+    if (srcBytes.length > SZ) return void (term.textContent = `Error: Source exceeds ${SZ} bytes`);
+
+    setStatus('Running...', CLS.ok);
+    btn.disabled = true;
+
+    await new Promise(resolve => setTimeout(resolve, 10));
+
     const [out, t] = await time(() => {
         new Uint8Array(wasm.memory.buffer).set(srcBytes, wasm.src_ptr());
         const len = wasm.run(srcBytes.length);
         return new TextDecoder().decode(new Uint8Array(wasm.memory.buffer, wasm.out_ptr(), len));
     });
+
     term.textContent = out;
-    setStatus(`ready (${t})`);
+    setStatus(`Ready (${t})`);
+    btn.disabled = false;
 };
 
 const sync = () => {