Loading...
Loading...
When building Next.js App Router pages with data loading, slow fetches, or Suspense, generate loading.tsx using shadcn/ui Skeleton placeholders for instant loading UI. Always install shadcn skeleton component first if not present. Use for dashboards, lists, profiles, forms.
npx skill4agent add akashp1712/skills next-loading-skeletonnpx shadcn@latest add skeletonnpx shadcn@latest add card table avatar badgeloading.tsxpage.tsxLoading(){ Skeleton }animate-pulse// Text line
<Skeleton className="h-4 w-[250px] rounded-full" />
// Card
<Skeleton className="h-[125px] w-full rounded-lg" />
// Avatar
<Skeleton className="h-10 w-10 rounded-full" />
// Table row
<div className="flex gap-4">
<Skeleton className="h-4 w-[100px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[150px]" />
</div>python scripts/generate-loading.py "dashboard with 4 stat cards and recent users table"loading.tsximport { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<div className="space-y-4 animate-pulse">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} className="h-[125px] w-full rounded-lg" />
))}
</div>
<div className="space-y-2">
{Array.from({ length: 3 }).map((_, i) => (
<Skeleton key={i} className="h-20 w-full rounded-lg" />
))}
</div>
</div>
)
}import { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<div className="space-y-6 animate-pulse">
<div className="flex items-center gap-4">
<Skeleton className="h-20 w-20 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-6 w-[200px]" />
<Skeleton className="h-4 w-[150px]" />
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<Skeleton className="h-[200px] w-full rounded-lg" />
<Skeleton className="h-[200px] w-full rounded-lg" />
</div>
</div>
)
}import { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<div className="space-y-4 animate-pulse">
<div className="flex gap-4">
<Skeleton className="h-10 w-[300px]" />
<Skeleton className="h-10 w-[100px]" />
</div>
<div className="space-y-2">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="flex gap-4">
<Skeleton className="h-4 w-[100px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[150px]" />
<Skeleton className="h-4 w-[100px]" />
</div>
))}
</div>
</div>
)
}