28 lines
610 B
TypeScript
28 lines
610 B
TypeScript
import { cn } from '../lib/utils';
|
|
|
|
function Skeleton({
|
|
className,
|
|
children,
|
|
isLoading = true,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement> & { isLoading?: boolean }) {
|
|
return (
|
|
<div
|
|
className={cn('relative inline-block align-top', className)}
|
|
{...props}
|
|
>
|
|
<div className={cn({ invisible: isLoading })}>
|
|
{children ?? <span className="block h-4 w-24" />}
|
|
</div>
|
|
{isLoading && (
|
|
<div
|
|
aria-hidden
|
|
className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { Skeleton };
|