refactor: optimize data fetching in BlockDisplay component

hngngn · Jan 1, 2025 · 4aebcd8 · 4aebcd8
1 parent e3283b8
commit 4aebcd8
Showing 1 changed file with 13 additions and 9 deletions.
diff --git a/docs/src/components/block-display.tsx b/docs/src/components/block-display.tsx
@@ -11,18 +11,22 @@ import { Show, createMemo } 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 = createMemo<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>
 	);