Spaces:
Sleeping
Sleeping
File size: 1,576 Bytes
c4412d0 c6f90aa c4412d0 c6f90aa c4412d0 c6f90aa c4412d0 c6f90aa c4412d0 c6f90aa c4412d0 c6f90aa c4412d0 c6f90aa c4412d0 c6f90aa 5081fcb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/**
* ChatBotGridSkeleton - A loading placeholder component that displays a grid of skeleton cards
* Used to show a loading state while chat bot data is being fetched
* Renders 6 identical skeleton cards in a responsive grid layout
*/
export default function ChatBotGridSkeleton() {
return (
// Responsive grid container: 1 column (mobile), 2 columns (sm), 3 columns (lg)
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{/* Generate 6 skeleton cards using Array constructor and map */}
{[...Array(6)].map((_, index) => (
<div
key={index}
className="animate-pulse rounded-lg border border-gray-200 bg-white p-6 shadow-sm"
>
{/* Header section with avatar and status indicator */}
<div className="mb-4 flex items-center justify-between">
<div className="h-8 w-8 rounded-full bg-gray-200" />{" "}
{/* Avatar placeholder */}
<div className="h-6 w-24 rounded-full bg-gray-200" />{" "}
{/* Status indicator placeholder */}
</div>
{/* Title placeholder */}
<div className="mb-2 h-6 w-3/4 rounded bg-gray-200" />
{/* Description text placeholders - two lines */}
<div className="mb-4 space-y-2">
<div className="h-4 w-full rounded bg-gray-200" />
<div className="h-4 w-5/6 rounded bg-gray-200" />
</div>
{/* Action button placeholder */}
<div className="h-10 w-full rounded-lg bg-gray-200" />
</div>
))}
</div>
);
}
|