fix ScrollSectionsList not working with suspended component

Author: conico974

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

@@ -1,5 +1,4 @@
 import type { DocumentBlock, JSONDocument } from '@gitbook/api';
-import React from 'react';
 
 import {
     SkeletonCard,
@@ -47,7 +46,7 @@ export interface BlockProps<Block extends DocumentBlock> extends DocumentContext
 }
 
 export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
-    const { block, style, isEstimatedOffscreen, context } = props;
+    const { block } = props;
 
     const content = (() => {
         switch (block.type) {
@@ -116,17 +115,7 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
         }
     })();
 
-    if (!isEstimatedOffscreen || context.wrapBlocksInSuspense === false) {
-        // When blocks are estimated to be on the initial viewport, we render them immediately
-        // to avoid a flash of a loading skeleton.
-        return content;
-    }
-
-    return (
-        <React.Suspense fallback={<BlockSkeleton block={block} style={style} />}>
-            {content}
-        </React.Suspense>
-    );
+    return content;
 }
 
 /**

packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx

@@ -7,6 +7,7 @@ import type { DocumentSection } from '@/lib/document-sections';
 import { tcls } from '@/lib/tailwind';
 
 import { HEADER_HEIGHT_DESKTOP } from '../layout';
+import { useBodyLoaded } from '../primitives/LoadingStateProvider';
 import { AsideSectionHighlight } from './AsideSectionHighlight';
 
 /**
@@ -30,9 +31,12 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
         });
     }, [sections]);
 
+    const bodyLoaded = useBodyLoaded();
+
     const activeId = useScrollActiveId(ids, {
         rootMargin: `-${HEADER_HEIGHT_DESKTOP}px 0px -40% 0px`,
         threshold: SECTION_INTERSECTING_THRESHOLD,
+        additionalEffects: bodyLoaded,
     });
 
     return (

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -11,6 +11,7 @@ import { DocumentView, DocumentViewSkeleton } from '../DocumentView';
 import { TrackPageViewEvent } from '../Insights';
 import { PageFeedbackForm } from '../PageFeedback';
 import { DateRelative } from '../primitives';
+import { SuspenseLoadedHint } from '../primitives/LoadingStateProvider';
 import { PageBodyBlankslate } from './PageBodyBlankslate';
 import { PageCover } from './PageCover';
 import { PageFooterNavigation } from './PageFooterNavigation';
@@ -72,6 +73,7 @@ export function PageBody(props: {
                             />
                         }
                     >
+                        <SuspenseLoadedHint />
                         <DocumentView
                             document={document}
                             style="grid [&>*+*]:mt-5"

packages/gitbook/src/components/RootLayout/ClientContexts.tsx

@@ -4,12 +4,17 @@ import type React from 'react';
 
 import { TranslateContext } from '@/intl/client';
 import type { TranslationLanguage } from '@/intl/translations';
+import { LoadingStateProvider } from '../primitives/LoadingStateProvider';
 
 export function ClientContexts(props: {
     language: TranslationLanguage;
     children: React.ReactNode;
 }) {
     const { children, language } = props;
 
-    return <TranslateContext.Provider value={language}>{children}</TranslateContext.Provider>;
+    return (
+        <TranslateContext.Provider value={language}>
+            <LoadingStateProvider>{children}</LoadingStateProvider>
+        </TranslateContext.Provider>
+    );
 }

packages/gitbook/src/components/hooks/useScrollActiveId.ts

@@ -8,9 +8,10 @@ export function useScrollActiveId(
     options: {
         rootMargin?: string;
         threshold?: number;
+        additionalEffects?: boolean;
     } = {}
 ) {
-    const { rootMargin, threshold = 0.5 } = options;
+    const { rootMargin, threshold = 0.5, additionalEffects } = options;
 
     const [activeId, setActiveId] = React.useState<string>(ids[0]);
     const sectionsIntersectingMap = React.useRef<Map<string, boolean>>(new Map());
@@ -70,7 +71,7 @@ export function useScrollActiveId(
         return () => {
             observer.disconnect();
         };
-    }, [ids, threshold, rootMargin]);
+    }, [ids, threshold, rootMargin, additionalEffects]);
 
     return activeId;
 }

packages/gitbook/src/components/primitives/LoadingStateProvider.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+export const LoadingStateProviderContext = createContext<{
+    bodyLoaded: boolean;
+    setBodyLoaded: (loaded: boolean) => void;
+}>({
+    bodyLoaded: false,
+    setBodyLoaded: () => {},
+});
+
+/**
+ * A provider that tracks the loading state of the body.
+ * This is used to determine when the body has finished loading.
+ * If we need to track more loading states in the future, we can extend this context.
+ */
+export function LoadingStateProvider({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const [bodyLoaded, setBodyLoaded] = useState(false);
+
+    return (
+        <LoadingStateProviderContext.Provider value={{ bodyLoaded, setBodyLoaded }}>
+            {children}
+        </LoadingStateProviderContext.Provider>
+    );
+}
+
+/** * Hook to get the current loading state of the body.
+ * Returns true if the body has finished loading inside the suspense boundary.
+ */
+export function useBodyLoaded() {
+    const context = useContext(LoadingStateProviderContext);
+    return useMemo(() => context.bodyLoaded, [context.bodyLoaded]);
+}
+
+/**
+ * A component that sets the body as loaded when it is mounted.
+ * It should be used inside a Suspense boundary to indicate that the body has finished loading.
+ */
+export function SuspenseLoadedHint() {
+    const context = useContext(LoadingStateProviderContext);
+    useEffect(() => {
+        context.setBodyLoaded(true);
+    }, [context]);
+    return null;
+}