ematipico · Oct 26, 2026 · Oct 23, 2026 · Oct 26, 2026
diff --git a/public/robots.txt b/public/robots.txt
@@ -1,2 +1,3 @@
 User-agent: *
+Disallow: /playground/
 Disallow: /sitemap/
diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx
@@ -94,6 +94,7 @@ function viewLabel(view: PlaygroundViewType): string {
 export default function Playground({
 	setPlaygroundState,
 	playgroundState,
+	onEditorFocus,
 }: PlaygroundProps) {
 	const [leftDrawerOpen, setLeftDrawerOpen] = useState(false);
 	const [rightDrawerOpen, setRightDrawerOpen] = useState(false);
@@ -253,7 +254,7 @@ export default function Playground({
 			placeholder="Enter your code here"
 			onUpdate={onUpdate}
 			onChange={onChange}
-			autoFocus={true}
+			onFocusCapture={onEditorFocus}
 			data-testid="editor"
 			gritQueryMatches={gritQueryResults.matches}
 		/>

diff --git a/src/playground/PlaygroundLoader.tsx b/src/playground/PlaygroundLoader.tsx
@@ -2,11 +2,11 @@ import type { RuleDomainValue } from "@biomejs/wasm-web";
 import {
 	type Dispatch,
 	type SetStateAction,
+	useCallback,
 	useEffect,
 	useRef,
 	useState,
 } from "react";
-import LoadingScreen from "@/playground/components/LoadingScreen";
 import Playground from "@/playground/Playground";
 import {
 	type ArrowParentheses,
@@ -58,13 +58,18 @@ function PlaygroundLoader() {
 	const [loadingState, setLoadingState] = useState<LoadingState>(
 		LoadingState.Loading,
 	);
+	const [loadRequested, setLoadRequested] = useState(false);
 	const [state, setPlaygroundState, resetPlaygroundState] =
 		usePlaygroundState();
 	const workerRef = useRef<Worker | null>(null);
 	const prettierWorkerRef = useRef<Worker | null>(null);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: dependencies mismatch
 	useEffect(() => {
+		if (!loadRequested) {
+			return;
+		}
+
 		workerRef.current = new Worker(
 			new URL("./workers/biomeWorker", import.meta.url),
 			{ type: "module" },
@@ -188,7 +193,7 @@ function PlaygroundLoader() {
 			workerRef.current?.terminate();
 			prettierWorkerRef.current?.terminate();
 		};
-	}, []);
+	}, [loadRequested]);
 
 	// Dispatch updated settings
 	// biome-ignore lint/correctness/useExhaustiveDependencies: dependencies mismatch
@@ -277,22 +282,30 @@ function PlaygroundLoader() {
 		getFileState(state, state.currentFile)?.gritQuery,
 	]);
 
-	switch (loadingState) {
-		case LoadingState.Error:
-			return <div>Error loading. Please refresh</div>;
-
-		case LoadingState.Loading:
-			return <LoadingScreen />;
-
-		default:
-			return (
-				<Playground
-					resetPlaygroundState={resetPlaygroundState}
-					setPlaygroundState={setPlaygroundState}
-					playgroundState={state}
-				/>
-			);
-	}
+	const loadPlayground = useCallback(() => {
+		setLoadRequested(true);
+	}, []);
+
+	return (
+		<>
+			<Playground
+				resetPlaygroundState={resetPlaygroundState}
+				setPlaygroundState={setPlaygroundState}
+				playgroundState={state}
+				onEditorFocus={loadPlayground}
+			/>
+			{loadRequested && loadingState === LoadingState.Loading && (
+				<div className="playground-load-status" role="status">
+					Loading Biome…
+				</div>
+			)}
+			{loadingState === LoadingState.Error && (
+				<div className="playground-load-status error" role="alert">
+					Error loading Biome. Please refresh.
+				</div>
+			)}
+		</>
+	);
 }
 
 function buildLocation(state: PlaygroundState): string {

diff --git a/src/playground/components/LoadingScreen.tsx b/src/playground/components/LoadingScreen.tsx
diff --git a/src/playground/types.ts b/src/playground/types.ts
@@ -336,6 +336,7 @@ export interface PlaygroundProps {
 	setPlaygroundState: Dispatch<SetStateAction<PlaygroundState>>;
 	resetPlaygroundState: () => void;
 	playgroundState: PlaygroundState;
+	onEditorFocus: () => void;
 }
 
 export type Tree = ReturnType<typeof parser.parse>;

diff --git a/src/styles/playground/index.css b/src/styles/playground/index.css
@@ -16,35 +16,41 @@ body {
 	width: 100%;
 	height: 100%;
 }
-.loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	width: 100%;
-}
 
 #root {
+	position: relative;
 	display: flex;
 	width: 100%;
 	height: calc(100vh - 65px); /* header size + border */
 }
 
+.playground-load-status {
+	position: absolute;
+	z-index: 10;
+	top: 0.75rem;
+	left: 50%;
+	transform: translateX(-50%);
+	border: 1px solid var(--sl-color-gray-5);
+	border-radius: 0.5rem;
+	padding: 0.5rem 0.75rem;
+	background: var(--sl-color-bg);
+	box-shadow: var(--sl-shadow-md);
+	font-size: 0.875rem;
+	pointer-events: none;
+}
+
+.playground-load-status.error {
+	border-color: var(--sl-color-red-high);
+	color: var(--sl-color-red-high);
+}
+
 body {
 	display: flex;
 	flex-direction: column;
 	overscroll-behavior-y: none;
 	height: 100vh;
 	width: 100%;
 
-	.loading {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		width: 100%;
-	}
-
 	#root {
 		display: flex;
 	}

diff --git a/tests/playground/smoke.spec.ts b/tests/playground/smoke.spec.ts
@@ -6,6 +6,13 @@ function encodeCode(code: string): string {
 	return Buffer.from(code, "utf16le").toString("base64");
 }
 
+async function activatePlayground(page: Page) {
+	await page.getByTestId("editor").getByRole("textbox").focus();
+	const loadStatus = page.locator(".playground-load-status");
+	await expect(loadStatus).toHaveText("Loading Biome…");
+	await expect(loadStatus).toHaveCount(0, { timeout: 30_000 });
+}
+
 /** Toggles a view from the toolbar, expanding the "Internals" group first if needed. */
 async function toggleView(
 	page: Page,
@@ -19,12 +26,35 @@ async function toggleView(
 	await button.click(options.additive ? { modifiers: ["Shift"] } : {});
 }
 
+test("loads the Biome WASM after editor focus", async ({ page }) => {
+	const wasmRequests: string[] = [];
+	page.on("request", (request) => {
+		const url = request.url();
+		if (url.includes("biome_wasm_bg") && url.includes(".wasm")) {
+			wasmRequests.push(url);
+		}
+	});
+
+	await page.goto("/playground");
+	await page.waitForLoadState("networkidle");
+	await expect(
+		page.getByTestId("editor").getByRole("textbox"),
+	).not.toBeFocused();
+	expect(wasmRequests).toEqual([]);
+
+	await activatePlayground(page);
+	await expect
+		.poll(() => wasmRequests.length, { timeout: 30_000 })
+		.toBeGreaterThan(0);
+});
+
 test.describe("playground should format code", () => {
 	test.describe("on navigation", () => {
 		test("javascript", async ({ page }) => {
 			await page.goto(
 				"/playground?code=bABlAHQAIABhACAAPQAgADUAOwA%3D&prettier=true",
 			);
+			await activatePlayground(page);
 			await expect(
 				page.getByTestId("biome-output").getByRole("textbox"),
 			).toContainText("let a = 5;");
@@ -37,6 +67,7 @@ test.describe("playground should format code", () => {
 			await page.goto(
 				"/playground?files.main.css=ZABpAHYAIAB7AGMAbwBsAG8AcgA6ACAAYgBsAHUAZQA7AH0A&prettier=true",
 			);
+			await activatePlayground(page);
 			await expect(
 				page.getByTestId("biome-output").getByRole("textbox"),
 			).toContainText("div { color: blue;}");
@@ -49,6 +80,7 @@ test.describe("playground should format code", () => {
 			await page.goto(
 				"/playground?files.main.html=PABkAGkAdgA%2BADwALwBkAGkAdgA%2BAA%3D%3D&prettier=true",
 			);
+			await activatePlayground(page);
 			await expect(
 				page.getByTestId("biome-output").getByRole("textbox"),
 			).toContainText("<div></div>");
@@ -63,6 +95,7 @@ test.describe("playground should format code", () => {
 			"files.main.md": encodeCode("one\ntwo\n"),
 		});
 		await page.goto(`/playground?prettier=true#${hash}`);
+		await activatePlayground(page);
 		const biomeOutput = page.getByTestId("biome-output").getByRole("textbox");
 		const prettierOutput = page
 			.getByTestId("prettier-output")
@@ -93,6 +126,7 @@ test.describe("playground should format code", () => {
 		await page.goto(
 			`/playground?prettier=true#code=${encodeURIComponent(encodeCode("let a=5"))}`,
 		);
+		await activatePlayground(page);
 		await expect(page.getByTestId("prettier-diff-hint")).toHaveText(
 			"Exact match",
 		);
@@ -101,6 +135,7 @@ test.describe("playground should format code", () => {
 	test.describe("on typing", () => {
 		test("javascript", async ({ page }) => {
 			await page.goto("/playground");
+			await activatePlayground(page);
 			await page.getByLabel("Compare Prettier").check();
 			await page.getByTestId("editor").getByRole("textbox").fill("let a = 5;");
 			await expect(
@@ -118,6 +153,7 @@ test.describe("playground should show formatter IR", () => {
 
 	test("javascript", async ({ page }) => {
 		await page.goto("/playground?code=bABlAHQAIABhACAAPQAgADUAOwA%3D");
+		await activatePlayground(page);
 		await toggleView(page, "Formatter IR");
 		await page
 			.locator(".playground-view-pane")
@@ -135,6 +171,7 @@ test.describe("playground should show formatter IR", () => {
 		await page.goto(
 			"/playground?files.main.css=ZABpAHYAIAB7AGMAbwBsAG8AcgA6ACAAYgBsAHUAZQA7AH0A",
 		);
+		await activatePlayground(page);
 		await toggleView(page, "Formatter IR");
 		await page
 			.locator(".playground-view-pane")
@@ -152,6 +189,7 @@ test.describe("playground should show formatter IR", () => {
 		await page.goto(
 			"/playground?files.main.html=PABkAGkAdgA%2BADwALwBkAGkAdgA%2BAA%3D%3D",
 		);
+		await activatePlayground(page);
 		await toggleView(page, "Formatter IR");
 		await page
 			.locator(".playground-view-pane")
@@ -234,6 +272,7 @@ test.describe("playground links", () => {
 			const popup = page.waitForEvent("popup");
 			await link.click();
 			const playground = await popup;
+			await activatePlayground(playground);
 			await expect(
 				playground.getByTestId("editor").locator(".cm-line"),
 			).toHaveText(code.split("\n"));
@@ -360,6 +399,7 @@ test.describe("playground links", () => {
 	test("loads code from the hash", async ({ page }) => {
 		const code = "let hashValue = 1;";
 		await page.goto(`/playground#code=${encodeURIComponent(encodeCode(code))}`);
+		await activatePlayground(page);
 
 		await expect(page.getByTestId("editor").getByRole("textbox")).toContainText(
 			code,
@@ -406,6 +446,7 @@ test.describe("playground links", () => {
 			"files.main.ts": encodeCode('import { nested } from "./src/component";'),
 		});
 		await page.goto(`/playground#${hash}`);
+		await activatePlayground(page);
 
 		await expect(
 			page.getByRole("button", { name: "component.ts", exact: true }),
@@ -477,6 +518,7 @@ test.describe("playground links", () => {
 			),
 		});
 		await page.goto(`/playground#${hash}`);
+		await activatePlayground(page);
 
 		await expect(
 			page.getByTestId("biome-output").getByRole("textbox"),
@@ -489,6 +531,7 @@ test.describe("playground layout", () => {
 		await page.goto(
 			`/playground?prettier=true#code=${encodeURIComponent(encodeCode("let a=5"))}`,
 		);
+		await activatePlayground(page);
 		const output = page.getByTestId("biome-output").getByRole("textbox");
 		const comparePrettier = page.getByLabel("Compare Prettier");
 		await expect(output).toContainText("let a = 5;");
@@ -517,6 +560,7 @@ test.describe("playground layout", () => {
 		await page.goto(
 			`/playground?enabledLinting=false&fix=safeFixes#code=${encodeURIComponent(encodeCode("let a=5"))}`,
 		);
+		await activatePlayground(page);
 
 		await expect(
 			page.getByTestId("biome-output").getByRole("textbox"),
@@ -594,6 +638,7 @@ test.describe("playground layout", () => {
 		await expect(page.getByLabel("Language", { exact: true })).toBeDisabled();
 
 		await page.reload();
+		await activatePlayground(page);
 		await page.getByRole("button", { name: "main.tsx", exact: true }).click();
 		await page.getByRole("button", { name: "Safe", exact: true }).click();
 		await page.getByLabel("Format", { exact: true }).uncheck();
@@ -848,6 +893,7 @@ test.describe("playground layout", () => {
 				localStorage.setItem("playground:gritql-matches-ratio", String(size));
 			}, size);
 			await page.goto(`/playground?code=${gritCode}`);
+			await activatePlayground(page);
 			await page.getByRole("button", { name: "GritQL search" }).click();
 			await page
 				.locator(".gritql-panel .cm-content")
@@ -884,6 +930,7 @@ test.describe("playground layout", () => {
 		await page.goto(
 			`/playground?prettier=true#code=${encodeURIComponent(encodeCode(code))}`,
 		);
+		await activatePlayground(page);
 		const biome = page.getByTestId("biome-output");
 		const prettier = page.getByTestId("prettier-output");
 		await expect(prettier.getByRole("textbox")).toContainText("let a59 = 59;");
@@ -950,6 +997,7 @@ test.describe("playground GritQL search", () => {
 			await page.goto(
 				`/playground?files.${file}=${encodeURIComponent(encodeCode(code))}`,
 			);
+			await activatePlayground(page);
 			await toggleView(page, "GritQL search");
 			await page.locator(".gritql-select").selectOption({ label: language });
 			await page.locator(".gritql-panel .cm-content").fill(query);