docs: share handle slower code blocks

1 files changed, 20 insertions, 11 deletions

diff --git a/packages/web/src/components/CodeBlock.tsx b/packages/web/src/components/CodeBlock.tsx
index 03744550e..4c6aab48e 100644
--- a/packages/web/src/components/CodeBlock.tsx
+++ b/packages/web/src/components/CodeBlock.tsx
@@ -18,16 +18,19 @@ function CodeBlock(props: CodeBlockProps) {
   const [local, rest] = splitProps(props, ["code", "lang", "onRendered"])
   let containerRef!: HTMLDivElement
 
-  const [html] = createResource(() => [local.code, local.lang], async ([code, lang]) => {
-    return (await codeToHtml(code || "", {
-      lang: lang || "text",
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      transformers: [transformerNotationDiff()],
-    })) as string
-  })
+  const [html] = createResource(
+    () => [local.code, local.lang],
+    async ([code, lang]) => {
+      return (await codeToHtml(code || "", {
+        lang: lang || "text",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        transformers: [transformerNotationDiff()],
+      })) as string
+    },
+  )
 
   onCleanup(() => {
     if (containerRef) containerRef.innerHTML = ""
@@ -41,7 +44,13 @@ function CodeBlock(props: CodeBlockProps) {
     }
   })
 
-  return <div ref={containerRef} class={styles.codeblock} {...rest}></div>
+  return (
+    <>
+      {html() ? (
+        <div ref={containerRef} class={styles.codeblock} {...rest}></div>
+      ) : null}
+    </>
+  )
 }
 
 export default CodeBlock