amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 05:03:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [Beta] Enable Selective Hydration in more places

* Fix typo
This commit is contained in:
dan
2022-05-25 23:20:06 +01:00
committed by GitHub
parent 4708fe6fd2
commit 47eea56bcf
3 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
beta/src/components/Layout/Nav/MobileNav.tsx
View File

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

17
beta/src/components/Layout/Page.tsx
View File

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

5
beta/src/components/Layout/Sidebar/Sidebar.tsx
View File

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