[Beta] Enable Selective Hydration in more places (#4689)

* [Beta] Enable Selective Hydration in more places

* Fix typo

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>
     </>
   );
 }

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">
+            {/* No fallback UI so need to be careful not to suspend directly inside. */}
-              <div className="w-full min-w-0">
+            <React.Suspense fallback={null}>
-                <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
+              <div className="flex flex-1 w-full h-full self-stretch">
-                  {children}
+                <div className="w-full min-w-0">
-                  <Footer />
+                  <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
-                </main>
+                    {children}
+                    <Footer />
+                  </main>
+                </div>
               </div>
-            </div>
+            </React.Suspense>
           </div>
         </SidebarContext.Provider>
       </MenuProvider>

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">