Loading Skeleton

• In the /app/dashboard folder, create a new file called loading.tsx:

• /app/dashboard/loading.tsx

import DashboardSkeleton from '@/app/ui/skeletons';

export default function Loading() {
  return <DashboardSkeleton />;
}

<Suspense fallback={<Loading />}>
  <CardWrapper />
</Suspense>

Pages

• dashboard/(overview)/loading.tsx
• dashboard/(overview)/page.tsx
• dashboard/customer/page.tsx
• dashboard/invoices/page.tsx

• A few things are happening here:

• loading.tsx is a special Next.js file built on top of Suspense, it allows you to create fallback UI to show as a replacement while page content loads.

• Since is static, it's shown immediately. The user can interact with while the dynamic content is loading.

• The user doesn't have to wait for the page to finish loading before navigating away (this is called interruptable navigation).