Skip to content

Commit 163affe

Browse files
unamedkrclaude
andauthored
ux(wasm): show "Thinking..." indicator during prompt prefill (#26)
First-token latency can be several seconds on a 0.8B model in WASM (processing the full prompt through 28 layers in single-threaded WASM). Without feedback, users see a blank assistant bubble and think the demo is broken. Add a spinner + "Thinking..." message inside the assistant bubble that appears immediately after sending. Replaced by the first streamed token. Also show "Processing prompt..." in the stats bar. Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent d016c78 commit 163affe

1 file changed

Lines changed: 5 additions & 0 deletions

File tree

wasm/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
.message.user { background: #1a1a2e; border: 1px solid #2a2a4e; }
6969
.message.assistant { background: #111; border: 1px solid #222; }
7070
.message.assistant .cursor { animation: blink 1s step-end infinite; }
71+
.message.assistant .thinking { color: #6ee7b7; font-size: 13px; font-style: italic; }
7172
@keyframes blink { 50% { opacity: 0; } }
7273
.message.system { color: #666; font-size: 12px; text-align: center; white-space: normal; }
7374
.message code { background: #1a1a1a; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
@@ -412,9 +413,13 @@ <h2>LLM in Your Browser</h2>
412413

413414
addMessage('user', text);
414415
const assistantDiv = addMessage('assistant', '');
416+
// Show "thinking" indicator during prompt prefill (before first token)
417+
assistantDiv.innerHTML = '<span class="thinking"><span class="spinner" style="display:inline-block;width:12px;height:12px;vertical-align:middle;margin-right:6px"></span>Thinking...</span>';
415418
let output = '';
416419
let tokenCount = 0;
417420
const startTime = performance.now();
421+
document.getElementById('statTokens').textContent = 'Processing prompt...';
422+
document.getElementById('statSpeed').textContent = '';
418423

419424
// Set streaming token callback
420425
Module.onToken = (token) => {

0 commit comments

Comments
 (0)