import { Bone, TableSkeleton } from '@/components/satellite/skeleton';
import { Container } from '@/components/ui/section';

export default function Loading() {
  return (
    <Container wide>
      <div className="pb-6 pt-8 md:pb-8 md:pt-12" role="status" aria-label="Loading launches">
        <Bone className="h-3 w-40" />
        <Bone className="mt-3 h-10 w-1/2 max-w-md md:h-14" />
      </div>
      <div className="grid gap-8 pb-8 lg:grid-cols-[3fr_2fr]">
        <Bone className="h-56 w-full" />
        <Bone className="h-56 w-full" />
      </div>
      <Bone className="h-36 w-full rounded-lg" />
      <div className="py-6">
        <TableSkeleton rows={14} />
      </div>
    </Container>
  );
}