Show a spinner while the table is starting

instance.start() runs synchronously and blocks the main thread for a
noticeable moment on heavy WASM init, so pressing "Tap to Start" would
freeze on the old screen with no feedback until the HUD suddenly
appeared. Add a "starting" status between "ready" and "running", and
defer the actual start() call by a nested rAF so the browser gets a
chance to paint the spinner before the blocking call runs.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-24 09:52:30 +02:00
co-authored by Claude Sonnet 5
parent d7ea38d8ee
commit 53c8ea03ac
2 changed files with 20 additions and 3 deletions
+7
View File
@@ -74,6 +74,13 @@ export default function PinballCanvasImpl({ tableData, rom, tableInfo }: Pinball
</p>
</div>
)}
{status === "starting" && (
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-ink/90 text-paper">
<div className="h-12 w-12 animate-spin rounded-full border-4 border-chrome/20 border-t-marquee" />
<div className="font-display text-2xl tracking-wide text-marquee">STARTING TABLE</div>
</div>
)}
</div>
);
}