[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>
+      {/* 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,6 +26,8 @@ export function Page({routeTree, children}: PageProps) {
               <Sidebar />
             </div>
 
+            {/* 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">
@@ -34,6 +36,7 @@ export function Page({routeTree, children}: PageProps) {
                   </main>
                 </div>
               </div>
+            </React.Suspense>
           </div>
         </SidebarContext.Provider>
       </MenuProvider>

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -42,7 +42,10 @@ export function Sidebar() {
         {isMobileSidebar ? (
           <MobileNav />
         ) : (
+          /* 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">