66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
|
|
return (
|
|
<>
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
width: width || "100%",
|
|
height: height || "60px",
|
|
backgroundColor: "var(--secondary-alt-bg)",
|
|
borderRadius: "8px",
|
|
animation: "shimmer 1.5s infinite",
|
|
marginBottom: count > 1 ? "1rem" : undefined
|
|
}}
|
|
></div>
|
|
))}
|
|
<style>{`
|
|
@keyframes shimmer {
|
|
0%, 100% { opacity: 0.5; }
|
|
50% { opacity: 1; }
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function CardSkeleton() {
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: "var(--secondary-alt-bg)",
|
|
border: "1px solid var(--border-color)",
|
|
borderRadius: "5px",
|
|
padding: "10px",
|
|
minHeight: "80px"
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: "60%",
|
|
height: "20px",
|
|
backgroundColor: "var(--tertiary-bg)",
|
|
borderRadius: "4px",
|
|
marginBottom: "0.5rem",
|
|
animation: "shimmer 1.5s infinite"
|
|
}}
|
|
></div>
|
|
<div
|
|
style={{
|
|
width: "40%",
|
|
height: "16px",
|
|
backgroundColor: "var(--tertiary-bg)",
|
|
borderRadius: "4px",
|
|
animation: "shimmer 1.5s infinite 0.2s"
|
|
}}
|
|
></div>
|
|
<style>{`
|
|
@keyframes shimmer {
|
|
0%, 100% { opacity: 0.5; }
|
|
50% { opacity: 1; }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|