Lazy-load the Mermaid code block (#4468)

Author: nolannbiron

.changeset/lazy-mermaid-code-block.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Lazy-load the Mermaid code block so pages that have code blocks but no diagram no longer ship its rendering dependencies.

packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx

@@ -12,8 +12,9 @@ import type { BlockProps } from '../Block';
 import { Blocks } from '../Blocks';
 import { ClientCodeBlock } from './ClientCodeBlock';
 import { CodeBlockRenderer } from './CodeBlockRenderer';
-import { MermaidCodeBlock } from './MermaidCodeBlock';
-import { type RenderedInline, getInlines, highlight } from './highlight';
+import { MermaidCodeBlockLazy } from './MermaidCodeBlockLazy';
+import { highlight } from './highlight';
+import { type RenderedInline, getInlines } from './highlight-tokens';
 
 /**
  * Render a code block, can be client-side or server-side.
@@ -117,7 +118,7 @@ export async function CodeBlock(
     return (
         <React.Suspense fallback={null}>
             {isMermaid ? (
-                <MermaidCodeBlock {...clientProps} />
+                <MermaidCodeBlockLazy {...clientProps} />
             ) : (
                 <ClientCodeBlock {...clientProps} />
             )}

packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlockLazy.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import type { ClientBlockProps } from './ClientCodeBlock';
+
+// Keeps react-aria and @panzoom/panzoom out of the entry chunk for the many pages that have code
+// blocks but no diagram. `ssr: true` so real diagram blocks still server-render their skeleton.
+const MermaidCodeBlock = dynamic(
+    () => import('./MermaidCodeBlock').then((mod) => mod.MermaidCodeBlock),
+    { ssr: true }
+);
+
+export function MermaidCodeBlockLazy(props: ClientBlockProps) {
+    return <MermaidCodeBlock {...props} />;
+}