loading.tsx

Add loading.tsx to a folder and Next.js wraps that segment's page in <Suspense fallback={<Loading />}>. The user sees the layout and the skeleton immediately while the page data loads.

app/products/loading.tsx

export default function Loading() {
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
      {Array.from({ length: 8 }, (_, i) => (
        <div key={i} className="h-64 animate-pulse rounded-lg bg-gray-200" />
      ))}
    </div>
  );
}

click "Products"
   │
   ├─ 0 ms    navbar + layout stay, skeleton grid shows (loading.tsx)
   │
   └─ 450 ms  product grid replaces the skeleton (page.tsx finished)