Loading Text

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

• /app/loading.tsx

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

<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).