From 2ccd43ee5e7ff7d6543f41d07d604557b36c44ea Mon Sep 17 00:00:00 2001
From: "Nolann B." <100787331+nolannbiron@users.noreply.github.com>
Date: Thu, 6 Aug 2026 08:59:03 +0200
Subject: [PATCH] Lazy-load the Mermaid code block (#4468)

---
 .changeset/lazy-mermaid-code-block.md             |  5 +++++
 .../DocumentView/CodeBlock/CodeBlock.tsx          |  7 ++++---
 .../CodeBlock/MermaidCodeBlockLazy.tsx            | 15 +++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/lazy-mermaid-code-block.md
 create mode 100644 packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlockLazy.tsx

diff --git a/.changeset/lazy-mermaid-code-block.md b/.changeset/lazy-mermaid-code-block.md
new file mode 100644
index 000000000..a63bf041d
--- /dev/null
+++ b/.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.
diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx
index a119239ba..8d2c643c0 100644
--- a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx
+++ b/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} />
             )}
diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlockLazy.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlockLazy.tsx
new file mode 100644
index 000000000..a948bd55a
--- /dev/null
+++ b/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} />;
+}