File size: 823 Bytes
f201243 fe48c70 f201243 |
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 |
import React from "react";
import { cn } from "@/lib/utils/cn";
interface LoadingSkeletonProps {
className?: string;
variant?: "text" | "circular" | "rectangular";
}
export const LoadingSkeleton: React.FC<LoadingSkeletonProps> = ({
className,
variant = "rectangular",
}) => {
const baseStyles = "animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] animate-shimmer";
const variants = {
text: "h-4 rounded",
circular: "rounded-full aspect-square",
rectangular: "rounded-xl",
};
return (
<div className={cn(baseStyles, variants[variant], className)} />
);
};
// Add shimmer animation to globals.css
const shimmerKeyframes = `
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
`;
|