diff --git a/docs/src/components/block-display.tsx b/docs/src/components/block-display.tsx
index 093d48ad..3fd38a91 100644
--- a/docs/src/components/block-display.tsx
+++ b/docs/src/components/block-display.tsx
@@ -6,23 +6,27 @@ import {
 import type { RegistryEntry } from "@/registry/schema";
 import { createAsync } from "@solidjs/router";
 import { clientOnly } from "@solidjs/start";
-import { Show, createMemo } from "solid-js";
+import { Show } from "solid-js";
 
 const BlockViewer = clientOnly(() => import("./block-viewer"), { lazy: true });
 
 const BlockDisplay = (props: { name: string }) => {
-	const item = createMemo<RegistryEntry>(() => Index.tailwindcss[props.name]);
-	const tree = createAsync(() => getCachedFileTree(item().files));
-	const highlightedFiles = createAsync(() =>
-		getCachedHighlightedFiles(item().files),
-	);
+	const block = createAsync<RegistryEntry>(() => Index.tailwindcss[props.name]);
+	const data = createAsync(async () => {
+		const [tree, highlightedFiles] = await Promise.all([
+			getCachedFileTree(block()?.files),
+			getCachedHighlightedFiles(block()?.files),
+		]);
+
+		return { tree, highlightedFiles };
+	});
 
 	return (
-		<Show when={item().files && tree() && highlightedFiles()}>
+		<Show when={block()?.files && data()?.tree && data()?.highlightedFiles}>
 			<BlockViewer
-				item={item()}
-				tree={tree()!}
-				highlightedFiles={highlightedFiles()!}
+				item={block()}
+				tree={data()!.tree}
+				highlightedFiles={data()!.highlightedFiles}
 			/>
 		</Show>
 	);