Use loading.tsx for route-level loading states | BeforeMerge Rules | BeforeMerge

Use loading.tsx for route-level loading states | BeforeMerge Rules | BeforeMerge

Why This Matters

Next.js wraps page.tsx in a Suspense boundary using loading.tsx as the fallback. This means:

Navigation shows instant feedback
The page shell renders immediately
Slow data doesn't block the UI

Good

// app/(dashboard)/scans/loading.tsx
export default function Loading() {
  return <ScanListSkeleton />
}