File size: 1,572 Bytes
a9df1b7 |
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 41 42 43 44 45 |
import React from "react";
const ProviderHeatmapSkeleton: React.FC = () => {
return (
<div className="relative bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg p-6 animate-pulse">
<div className="mb-4">
<div className="text-center bg-muted/20 rounded-lg p-3 border border-border/30">
{/* Avatar & name */}
<div className="flex items-center justify-center gap-2 mb-2">
<div className="h-8 w-8 rounded-md bg-muted shadow-sm" />
<div className="h-4 w-24 bg-muted rounded" />
</div>
{/* Compact stats placeholders */}
<div className="flex flex-wrap justify-center gap-2 text-xs mb-3">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="h-4 w-16 bg-muted rounded" />
))}
</div>
{/* Divider */}
<div className="border-t border-border/20 mb-3"></div>
{/* Releases past year placeholder */}
<div className="h-3 w-32 mx-auto bg-muted rounded" />
</div>
</div>
{/* Heatmap grid skeleton */}
<div className="flex flex-col items-center bg-muted/30 rounded-xl p-3">
<div
className="grid gap-1 w-full"
style={{ gridTemplateColumns: "repeat(52, minmax(0, 1fr))" }}
>
{Array.from({ length: 52 * 7 }).map((_, i) => (
<div key={i} className="h-3 bg-muted rounded" />
))}
</div>
</div>
</div>
);
};
export default ProviderHeatmapSkeleton;
|