diff --git a/docs/src/routes/playground/index.tsx b/docs/src/routes/playground/index.tsx
index 506904891..82af16758 100644
--- a/docs/src/routes/playground/index.tsx
+++ b/docs/src/routes/playground/index.tsx
@@ -151,6 +151,7 @@ export default function Playground() {
   const [monaco, setMonaco] = createSignal<Monaco>();
   const [codeEditor, setCodeEditor] =
     createSignal<MonacoEditor.IStandaloneCodeEditor>();
+  const [isMounted, setIsMounted] = createSignal(false);
   const [editorLoading, setEditorLoading] = createSignal(true);
   const [editorError, setEditorError] = createSignal<string>();
   const [formatShortcut, setFormatShortcut] = createSignal("Ctrl S");
@@ -199,6 +200,10 @@ export default function Playground() {
     return flattened;
   });
 
+  const isPlaygroundReady = createMemo(
+    () => isMounted() && !editorLoading() && runState() !== "loading",
+  );
+
   const setFailure = (message: string) => {
     setRunState("error");
     setStatusMessage(message);
@@ -679,6 +684,8 @@ export default function Playground() {
     );
   });
 
+  onMount(() => setIsMounted(true));
+
   onMount(() => {
     let disposed = false;
     let editor: MonacoEditor.IStandaloneCodeEditor | undefined;
@@ -927,10 +934,13 @@ export default function Playground() {
         og_url={`${DEFAULT_URL}playground`}
       />
 
-      <div class="playground-shell">
+      <div class="playground-shell" aria-busy={!isPlaygroundReady()}>
         <section
           class="playground-workspace"
           aria-label="Tombi WASM LSP playground"
+          aria-hidden={!isPlaygroundReady()}
+          classList={{ "is-initializing": !isPlaygroundReady() }}
+          hidden={!isMounted()}
         >
           <div class="playground-toolbar">
             <div class="playground-runtime-label">
@@ -1183,6 +1193,17 @@ export default function Playground() {
           </section>
         </section>
 
+        <Show when={!isPlaygroundReady()}>
+          <output
+            class="playground-workspace playground-initial-loading"
+            classList={{ "is-overlay": isMounted() }}
+            aria-live="polite"
+          >
+            <TbLoader2 class="playground-spinner" aria-hidden="true" />
+            <span>Loading playground…</span>
+          </output>
+        </Show>
+
         <Show when={treeContextMenu()}>
           {(menu) => (
             <div
diff --git a/docs/src/styles/playground.css b/docs/src/styles/playground.css
index f74b9746d..c581382d8 100644
--- a/docs/src/styles/playground.css
+++ b/docs/src/styles/playground.css
@@ -3,9 +3,36 @@
   --playground-muted: #667085;
   --playground-panel: #ffffff;
   --playground-editor: #f8fafc;
+  position: relative;
   padding: 2.5rem 0 4rem;
 }
 
+.playground-workspace.is-initializing {
+  visibility: hidden;
+}
+
+.playground-initial-loading {
+  display: grid;
+  min-height: 42rem;
+  color: var(--playground-muted);
+  font-size: 0.9rem;
+  font-weight: 650;
+  gap: 0.65rem;
+  place-content: center;
+}
+
+.playground-initial-loading.is-overlay {
+  position: absolute;
+  inset: 2.5rem 0 4rem;
+  min-height: 0;
+}
+
+.playground-initial-loading svg {
+  width: 1.4rem;
+  height: 1.4rem;
+  margin-inline: auto;
+}
+
 .playground-workspace {
   overflow: hidden;
   border: 1px solid var(--playground-border);