import { Skeleton, EventGridSkeleton } from '@/components/ui/Skeleton';

// Route-level skeleton shown during navigation while the server fetches the
// event list. Mirrors the EventsClient shell: title, filter tabs, card grid.
export default function EventsLoading() {
  return (
    <div className="section-padding">
      <div className="container-page">
        <Skeleton className="h-10 w-64" />
        <div className="mt-8 flex gap-2">
          <Skeleton className="h-10 w-32 rounded-btn" />
          <Skeleton className="h-10 w-28 rounded-btn" />
        </div>
        <div className="mt-8">
          <EventGridSkeleton count={6} />
        </div>
      </div>
    </div>
  );
}