Loading Skeleton
~10 mins
- nextjs
Loading Skeleton
- In the
/app/dashboardfolder, create a new file calledloading.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.tsxis 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).