From 47eea56bcf2cd39e4d26116707bffcbc3aeb41c4 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Wed, 25 May 2022 23:20:06 +0100
Subject: [PATCH] [Beta] Enable Selective Hydration in more places (#4689)

* [Beta] Enable Selective Hydration in more places

* Fix typo
---
 beta/src/components/Layout/Nav/MobileNav.tsx   |  5 ++++-
 beta/src/components/Layout/Page.tsx            | 17 ++++++++++-------
 beta/src/components/Layout/Sidebar/Sidebar.tsx |  5 ++++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx
index fe96dffc..fee48956 100644
--- a/beta/src/components/Layout/Nav/MobileNav.tsx
+++ b/beta/src/components/Layout/Nav/MobileNav.tsx
@@ -57,7 +57,10 @@ export function MobileNav() {
           API
         </TabButton>
       </div>
-      <SidebarRouteTree routeTree={tree as RouteItem} isMobile={true} />
+      {/* No fallback UI so need to be careful not to suspend directly inside. */}
+      <React.Suspense fallback={null}>
+        <SidebarRouteTree routeTree={tree as RouteItem} isMobile={true} />
+      </React.Suspense>
     </>
   );
 }
diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
index e9481b10..777a711f 100644
--- a/beta/src/components/Layout/Page.tsx
+++ b/beta/src/components/Layout/Page.tsx
@@ -26,14 +26,17 @@ export function Page({routeTree, children}: PageProps) {
               <Sidebar />
             </div>
 
-            <div className="flex flex-1 w-full h-full self-stretch">
-              <div className="w-full min-w-0">
-                <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
-                  {children}
-                  <Footer />
-                </main>
+            {/* No fallback UI so need to be careful not to suspend directly inside. */}
+            <React.Suspense fallback={null}>
+              <div className="flex flex-1 w-full h-full self-stretch">
+                <div className="w-full min-w-0">
+                  <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
+                    {children}
+                    <Footer />
+                  </main>
+                </div>
               </div>
-            </div>
+            </React.Suspense>
           </div>
         </SidebarContext.Provider>
       </MenuProvider>
diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx
index 8a325a2c..13b999f8 100644
--- a/beta/src/components/Layout/Sidebar/Sidebar.tsx
+++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx
@@ -42,7 +42,10 @@ export function Sidebar() {
         {isMobileSidebar ? (
           <MobileNav />
         ) : (
-          <SidebarRouteTree routeTree={routeTree} />
+          /* No fallback UI so need to be careful not to suspend directly inside. */
+          <React.Suspense fallback={null}>
+            <SidebarRouteTree routeTree={routeTree} />
+          </React.Suspense>
         )}
       </nav>
       <div className="sticky bottom-0 hidden lg:block">