fix(web): keep navigation shell before hydration
All checks were successful
Code Review / ai-code-review (push) Successful in 11s
CD Pipeline / tests (push) Successful in 1m17s
CD Pipeline / build-and-deploy (push) Successful in 3m53s
CD Pipeline / post-deploy-checks (push) Successful in 1m18s

This commit is contained in:
Your Name
2026-05-18 14:22:55 +08:00
parent ea96bb0971
commit 8ca875e6ad

View File

@@ -85,22 +85,9 @@ export function AppLayout({
localStorage.setItem(SIDEBAR_STATE_KEY, String(newState))
}
// Prevent hydration mismatch
if (!mounted) {
return (
<div className="min-h-screen bg-nothing-gray-50">
{showBackground && (
<DotMatrixBg
spacing={24}
dotSize={1}
dotColor="rgba(0, 0, 0, 0.06)"
bgColor="#FAFAFA"
/>
)}
<div className="relative z-10">{children}</div>
</div>
)
}
// Keep the navigation shell in the server-rendered HTML. If a rolling deploy
// or stale browser cache delays hydration, the operator still has navigation.
const effectiveCollapsed = mounted ? collapsed : false
return (
<div className="min-h-screen bg-nothing-gray-50">
@@ -117,14 +104,14 @@ export function AppLayout({
{/* Sidebar */}
<Sidebar
locale={locale}
collapsed={collapsed}
collapsed={effectiveCollapsed}
onToggle={handleToggle}
/>
{/* Header */}
<Header
locale={locale}
sidebarCollapsed={collapsed}
sidebarCollapsed={effectiveCollapsed}
/>
{/* Main Content */}
@@ -133,7 +120,7 @@ export function AppLayout({
'relative z-10',
'pt-[68px]',
'transition-all duration-300 ease-out',
collapsed ? 'ml-16' : 'ml-[224px]'
effectiveCollapsed ? 'ml-16' : 'ml-[224px]'
)}
>
{fullBleed ? (