Fix ScrollSectionsList with suspended component (#3390)

Co-authored-by: Nicolas Dorseuil <[email protected]>

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/PDF/PageControlButtons.tsx

@@ -32,6 +32,7 @@ export function PageControlButtons(props: {
     }, [pageIds]);
     const activeDivId = useScrollActiveId(divIds, {
         threshold: 0,
+        enabled: true,
     });
     const activeIndex = (activeDivId ? divIds.indexOf(activeDivId) : 0) + 1;
     const activePageId = pageIds[activeIndex - 1]?.[0];

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

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

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

@@ -11,7 +11,7 @@ import { DocumentView, DocumentViewSkeleton } from '../DocumentView';
 import { TrackPageViewEvent } from '../Insights';
 import { PageFeedbackForm } from '../PageFeedback';
 import { CurrentPageProvider } from '../hooks/useCurrentPage';
-import { DateRelative } from '../primitives';
+import { DateRelative, SuspenseLoadedHint } from '../primitives';
 import { PageBodyBlankslate } from './PageBodyBlankslate';
 import { PageCover } from './PageCover';
 import { PageFooterNavigation } from './PageFooterNavigation';
@@ -73,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,16 +8,20 @@ export function useScrollActiveId(
     options: {
         rootMargin?: string;
         threshold?: number;
-    } = {}
+        enabled: boolean;
+    } = { enabled: true }
 ) {
-    const { rootMargin, threshold = 0.5 } = options;
+    const { rootMargin, threshold = 0.5, enabled } = options;
 
     const [activeId, setActiveId] = React.useState<string>(ids[0]);
     const sectionsIntersectingMap = React.useRef<Map<string, boolean>>(new Map());
 
     React.useEffect(() => {
         const defaultActiveId = ids[0];
         setActiveId((activeId) => (ids.indexOf(activeId) !== -1 ? activeId : defaultActiveId));
+        if (!enabled) {
+            return;
+        }
 
         if (typeof IntersectionObserver === 'undefined') {
             return;
@@ -70,7 +74,7 @@ export function useScrollActiveId(
         return () => {
             observer.disconnect();
         };
-    }, [ids, threshold, rootMargin]);
+    }, [ids, threshold, rootMargin, enabled]);
 
     return activeId;
 }

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+// We don't export this context directly, you are supposed to use one of the hooks or components provided by this file.
+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 [bodyLoadedState, setBodyLoaded] = useState(false);
+
+    const bodyLoaded = useMemo(() => bodyLoadedState, [bodyLoadedState]);
+
+    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;
+}

packages/gitbook/src/components/primitives/index.ts

@@ -8,3 +8,4 @@ export * from './StyledLink';
 export * from './DateRelative';
 export * from './Emoji';
 export * from './LoadingPane';
+export * from './LoadingStateProvider';