Highlight code client-side (#2797)

Author: gregberge

.changeset/thin-files-flow.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve performances by highlighting code client-side if the code block is offscreen

packages/gitbook/src/components/Ads/Ad.tsx

@@ -13,6 +13,7 @@ import { t, useLanguage } from '@/intl/client';
 import { ClassValue, tcls } from '@/lib/tailwind';
 
 import { renderAd } from './renderAd';
+import { useHasBeenInViewport } from '../hooks/useHasBeenInViewport';
 import { useTrackEvent } from '../Insights';
 import { Link } from '../primitives';
 
@@ -43,7 +44,6 @@ export function Ad({
     mode?: 'classic' | 'auto' | 'cover';
 }) {
     const containerRef = React.useRef<HTMLDivElement>(null);
-    const [visible, setVisible] = React.useState(false);
     const [ad, setAd] = React.useState<
         { children: React.ReactNode; insightsAd: SiteInsightsAd | null } | undefined
     >(undefined);
@@ -57,42 +57,14 @@ export function Ad({
                 ad: ad.insightsAd,
             });
         }
-    }, [ad]);
+    }, [ad, trackEvent]);
 
-    // Observe the container visibility
-    React.useEffect(() => {
-        if (!containerRef.current) {
-            return;
-        }
-
-        if (typeof IntersectionObserver === 'undefined') {
-            return;
-        }
-
-        const observer = new IntersectionObserver(
-            ([entry]) => {
-                if (entry.isIntersecting) {
-                    setVisible(true);
-                }
-            },
-            {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.1,
-            },
-        );
-
-        observer.observe(containerRef.current);
-
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
+    const hasBeenInViewport = useHasBeenInViewport(containerRef, { threshold: 0.1 });
 
     // When the container is visible,
     // track an impression on the ad and fetch it
     React.useEffect(() => {
-        if (!visible) {
+        if (!hasBeenInViewport) {
             return;
         }
 
@@ -136,7 +108,7 @@ export function Ad({
         return () => {
             cancelled = true;
         };
-    }, [visible, zoneId, ignore, placement, mode, siteAdsStatus]);
+    }, [hasBeenInViewport, zoneId, ignore, placement, mode, siteAdsStatus]);
 
     return (
         <div ref={containerRef} className={tcls(style)} data-visual-test="removed">

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

@@ -7,7 +7,7 @@ import { Blocks } from '../Blocks';
 import { InlineProps } from '../Inline';
 import { Inlines } from '../Inlines';
 
-export async function Annotation(props: InlineProps<DocumentInlineAnnotation>) {
+export function Annotation(props: InlineProps<DocumentInlineAnnotation>) {
     const { inline, context, document, children } = props;
 
     const fragment = getNodeFragmentByType(inline, 'annotation-body');

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

@@ -0,0 +1,56 @@
+'use client';
+
+import type { DocumentBlockCode } from '@gitbook/api';
+import { useEffect, useRef, useState } from 'react';
+
+import { useHasBeenInViewport } from '@/components/hooks/useHasBeenInViewport';
+
+import type { HighlightLine, RenderedInline } from './highlight';
+import type { BlockProps } from '../Block';
+import { CodeBlockRenderer } from './CodeBlockRenderer';
+import { plainHighlight } from './plain-highlight';
+
+type ClientBlockProps = Pick<BlockProps<DocumentBlockCode>, 'block' | 'style'> & {
+    inlines: RenderedInline[];
+};
+
+/**
+ * Render a code-block client-side by loading the highlighter asynchronously.
+ * It allows us to defer some load to avoid blocking the rendering of the whole page with block highlighting.
+ */
+export function ClientCodeBlock(props: ClientBlockProps) {
+    const { block, style, inlines } = props;
+    const blockRef = useRef<HTMLDivElement>(null);
+    const [lines, setLines] = useState<HighlightLine[]>(() => plainHighlight(block, []));
+
+    // Preload the highlighter when the block is mounted.
+    useEffect(() => {
+        import('./highlight').then(({ preloadHighlight }) => preloadHighlight(block));
+    }, [block]);
+
+    // Check if the block is in the viewport to start highlighting it.
+    const hasBeenInViewport = useHasBeenInViewport(blockRef, {
+        rootMargin: '200px',
+    });
+
+    // Highlight the block when it's in the viewport.
+    useEffect(() => {
+        if (hasBeenInViewport) {
+            let canceled = false;
+            import('./highlight').then(({ highlight }) => {
+                // We use requestIdleCallback to avoid blocking the main thread
+                // when scrolling.
+                if (typeof requestIdleCallback === 'function') {
+                    requestIdleCallback(() => highlight(block, inlines).then(setLines));
+                } else {
+                    highlight(block, inlines).then(setLines);
+                }
+            });
+            return () => {
+                canceled = true;
+            };
+        }
+    }, [hasBeenInViewport, block, inlines]);
+
+    return <CodeBlockRenderer ref={blockRef} block={block} style={style} lines={lines} />;
+}