docs: share handle slow loading pages

packages/web/src/components/CodeBlock.tsx

@@ -1,8 +1,6 @@
 import {
   type JSX,
-  onCleanup,
   splitProps,
-  createEffect,
   createResource,
 } from "solid-js"
 import { codeToHtml } from "shiki"
@@ -12,15 +10,15 @@ import { transformerNotationDiff } from "@shikijs/transformers"
 interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
   code: string
   lang?: string
-  onRendered?: () => void
 }
 function CodeBlock(props: CodeBlockProps) {
-  const [local, rest] = splitProps(props, ["code", "lang", "onRendered"])
-  let containerRef!: HTMLDivElement
+  const [local, rest] = splitProps(props, ["code", "lang"])
 
   const [html] = createResource(
     () => [local.code, local.lang],
     async ([code, lang]) => {
+      // TODO: For testing delays
+      // await new Promise((resolve) => setTimeout(resolve, 3000))
       return (await codeToHtml(code || "", {
         lang: lang || "text",
         themes: {
@@ -32,25 +30,7 @@ function CodeBlock(props: CodeBlockProps) {
     },
   )
 
-  onCleanup(() => {
-    if (containerRef) containerRef.innerHTML = ""
-  })
-
-  createEffect(() => {
-    if (html() && containerRef) {
-      containerRef.innerHTML = html() as string
-
-      local.onRendered?.()
-    }
-  })
-
-  return (
-    <>
-      {html() ? (
-        <div ref={containerRef} class={styles.codeblock} {...rest}></div>
-      ) : null}
-    </>
-  )
+  return <div innerHTML={html()} class={styles.codeblock} {...rest}></div >
 }
 
 export default CodeBlock