Progressive loading (#79)

* Suspense boundary and progressive loading on blocks * Start refactoring to better leverage app router * Use skeleton for page layout * Improve dynamic toc * Switch page full width to be client side only * Format * Remove old PageLoading * Fix first page not marked as active * Close search when clicking search link
2026-09-23 11:03:39 +00:00 · 2023-12-28 14:38:15 +01:00
parent 1c2d68c518
commit 2fdf3e3838
41 changed files with 722 additions and 574 deletions
@@ -0,0 +1,102 @@
+import {
+    Collection,
+    CustomizationHeaderPreset,
+    CustomizationSettings,
+    Revision,
+    RevisionPageDocument,
+    RevisionPageGroup,
+    Space,
+} from '@gitbook/api';
+import React from 'react';
+
+import { Footer } from '@/components/Footer';
+import { CompactHeader, Header } from '@/components/Header';
+import { CONTAINER_STYLE } from '@/components/layout';
+import { SearchModal } from '@/components/Search';
+import { TableOfContents } from '@/components/TableOfContents';
+import { ContentPointer } from '@/lib/api';
+import { ContentRefContext } from '@/lib/references';
+import { tcls } from '@/lib/tailwind';
+
+/**
+ * Render the entire content of the space (header, table of contents, footer, and page content).
+ */
+export function SpaceLayout(props: {
+    content: ContentPointer;
+    space: Space;
+    collection: Collection | null;
+    collectionSpaces: Space[];
+    customization: CustomizationSettings;
+    pages: Revision['pages'];
+    ancestors: Array<RevisionPageDocument | RevisionPageGroup>;
+    children: React.ReactNode;
+}) {
+    const {
+        space,
+        collection,
+        collectionSpaces,
+        content,
+        pages,
+        customization,
+        ancestors,
+        children,
+        // document,
+    } = props;
+
+    // const asFullWidth = document ? hasFullWidthBlock(document) : false;
+    const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
+
+    const contentRefContext: ContentRefContext = {
+        space,
+        pages,
+        content,
+    };
+
+    return (
+        <div>
+            <Header
+                withTopHeader={withTopHeader}
+                space={space}
+                collection={collection}
+                collectionSpaces={collectionSpaces}
+                context={contentRefContext}
+                customization={customization}
+            />
+
+            <div className={tcls('flex', 'flex-col', 'lg:flex-row', CONTAINER_STYLE)}>
+                <TableOfContents
+                    space={space}
+                    customization={customization}
+                    content={content}
+                    pages={pages}
+                    ancestors={ancestors}
+                    context={contentRefContext}
+                    header={
+                        withTopHeader ? null : (
+                            <CompactHeader
+                                space={space}
+                                collection={collection}
+                                collectionSpaces={collectionSpaces}
+                                customization={customization}
+                            />
+                        )
+                    }
+                    withHeaderOffset={withTopHeader}
+                    visibleOnDesktop={true /*!!page.layout.tableOfContents */}
+                />
+                <div className={tcls('flex-1', 'flex', 'flex-col')}>{children}</div>
+            </div>
+
+            {customization.themes.toggeable ||
+            customization.footer.copyright ||
+            customization.footer.logo ||
+            customization.footer.groups?.length ? (
+                <Footer space={space} context={contentRefContext} customization={customization} />
+            ) : null}
+
+            <React.Suspense fallback={null}>
+                <SearchModal spaceId={space.id} withAsk={customization.aiSearch.enabled} />
+            </React.Suspense>
+        </div>
+    );
+}
@@ -0,0 +1 @@
+export * from './SpaceLayout';