The root layout called `await cookies()` to read the locale, which marked the entire app as dynamic. In Next.js 16, dynamic pages have Router Cache staleTime=0, causing a fresh RSC server roundtrip on every navigation — the root cause of ~400ms tab switching delays. - Remove cookies() from root layout, making it static - Add LocaleSync client component to read locale cookie on the client - Add loading.tsx skeleton for dashboard routes as a loading fallback
28 lines
988 B
TypeScript
28 lines
988 B
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export default function DashboardLoading() {
|
|
return (
|
|
<div className="flex flex-1 min-h-0 flex-col">
|
|
{/* Header skeleton */}
|
|
<div className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
|
|
<Skeleton className="h-5 w-5 rounded" />
|
|
<Skeleton className="h-4 w-32" />
|
|
</div>
|
|
{/* Toolbar skeleton */}
|
|
<div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
|
|
<Skeleton className="h-5 w-24" />
|
|
<Skeleton className="h-8 w-24" />
|
|
</div>
|
|
{/* Content skeleton */}
|
|
<div className="flex-1 p-4 space-y-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<Skeleton className="h-4 w-4 rounded" />
|
|
<Skeleton className="h-4 flex-1 max-w-md" />
|
|
<Skeleton className="h-4 w-16" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|