prowler/ui/app/(prowler)/_overview/exploitability/_components/top-issues.skeleton.tsx

import { Card, CardContent, Skeleton } from "@/components/shadcn";

export function TopIssuesSkeleton() {
  return (
    <Card
      variant="base"
      className="flex w-full flex-col"
      role="status"
      aria-label="Loading top issues"
    >
      <Skeleton className="h-7 w-32 rounded-xl" />
      <CardContent className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
        {Array.from({ length: 5 }).map((_, index) => (
          <Skeleton key={index} className="h-[88px] w-full rounded-xl" />
        ))}
      </CardContent>
    </Card>
  );
}