Add reusable Skeleton components and route-level loading files across public pages and admin lists so layouts stay stable while data loads. Co-authored-by: Cursor <cursoragent@cursor.com>
29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
import { Skeleton, ArticleSkeleton } from '@/components/ui/Skeleton';
|
|
|
|
// Route-level skeleton for the event detail page: back link, banner, article
|
|
// body on the left and the booking card in the sidebar.
|
|
export default function EventDetailLoading() {
|
|
return (
|
|
<div className="section-padding">
|
|
<div className="container-page">
|
|
<Skeleton className="h-5 w-36" />
|
|
<div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2">
|
|
<ArticleSkeleton withBanner />
|
|
</div>
|
|
<div>
|
|
<div className="bg-white rounded-card shadow-card p-6" aria-hidden="true">
|
|
<div className="text-center">
|
|
<Skeleton className="h-4 w-16 mx-auto" />
|
|
<Skeleton className="mt-3 h-10 w-32 mx-auto" />
|
|
</div>
|
|
<Skeleton className="mt-6 h-12 w-full rounded-btn" />
|
|
<Skeleton className="mt-3 h-4 w-3/4 mx-auto" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|