perf: Add suspense boundry for smoother hydration

facebook · Oct 31, 2023 · da1933e · da1933e
1 parent a7144df
commit da1933e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {Suspense} from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import BlogSidebar from '@theme/BlogSidebar';
@@ -28,7 +28,7 @@ export default function BlogLayout(props: Props): JSX.Element {
             })}
             itemScope
             itemType="https://schema.org/Blog">
-            {children}
+            <Suspense>{children}</Suspense>
           </main>
           {toc && <div className="col col--2">{toc}</div>}
         </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React, {useState, Suspense} from 'react';
 import {useDocsSidebar} from '@docusaurus/theme-common/internal';
 import BackToTopButton from '@theme/BackToTopButton';
 import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar';
@@ -29,7 +29,7 @@ export default function DocRootLayout({children}: Props): JSX.Element {
           />
         )}
         <DocRootLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
-          {children}
+          <Suspense>{children}</Suspense>
         </DocRootLayoutMain>
       </div>
     </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {Suspense} from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import {
@@ -53,7 +53,7 @@ export default function Layout(props: Props): JSX.Element {
           wrapperClassName,
         )}>
         <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
-          {children}
+          <Suspense>{children}</Suspense>
         </ErrorBoundary>
       </div>
 

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {Suspense} from 'react';
 import clsx from 'clsx';
 import {
   PageMetadata,
@@ -51,9 +51,11 @@ export default function MDXPage(props: Props): JSX.Element {
             <div className={clsx('col', !hideTableOfContents && 'col--8')}>
               {unlisted && <Unlisted />}
               <article>
-                <MDXContent>
-                  <MDXPageContent />
-                </MDXContent>
+                <Suspense>
+                  <MDXContent>
+                    <MDXPageContent />
+                  </MDXContent>
+                </Suspense>
               </article>
             </div>
             {!hideTableOfContents && MDXPageContent.toc.length > 0 && (