The glass board arrives in seconds: the figures' textures are 256 px (3.8 MB for all fifteen, down from 30), each kind takes its places as its file lands behind a progress bar, the toggle says it is fetching, and the squares sit exactly under the figures now that the checker covers the sheet's rim

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCLa2PaEeCj8njQZSWGqHx

src/routes/learn/game/+page.svelte

@@ -12,8 +12,16 @@
 	/** The glass board, loaded the first time it is asked for. */
 	let Glass = $state<typeof import('$lib/components/Glass.svelte').default | null>(null);
 	let onGlass = $state(false);
+	let fetching = $state(false);
 	async function seeGlass(open: boolean) {
-		if (open && !Glass) Glass = (await import('$lib/components/Glass.svelte')).default;
+		if (open && !Glass) {
+			fetching = true;
+			try {
+				Glass = (await import('$lib/components/Glass.svelte')).default;
+			} finally {
+				fetching = false;
+			}
+		}
 		onGlass = open;
 	}
 
@@ -72,7 +80,7 @@
 	<section class="stage">
 		<div class="boards">
 			{#if glass.open}
-				<p class="muted small"><button type="button" class="link plain" onclick={() => seeGlass(!onGlass)}>{onGlass ? 'Back to the flat boards' : 'See the glass board'}</button></p>
+				<p class="muted small"><button type="button" class="link plain" disabled={fetching} aria-busy={fetching} onclick={() => seeGlass(!onGlass)}>{fetching ? 'Fetching the glass board…' : onGlass ? 'Back to the flat boards' : 'See the glass board'}</button></p>
 			{/if}
 			{#if onGlass && Glass}
 				<Glass {g} {shownSquares} {shownCaptured} {checkSquare} selected={inspected} {reach} {calm} {tap} />