Skeleton

1import { cva, type VariantProps } from 'class-variance-authority';
2import { ComponentProps } from 'react';
3 
4import { cn } from '@/lib/utils';
5 
6/*
7 * UX4G skeleton: background-color neutral-100, pulse/wave animation.
8 * Shape variants cover typical loading states (line, avatar, thumbnail, rectangle).
9 */
10const SKELETON_VARIANTS = cva('bg-neutral-100', {
11  variants: {
12    shape: {
13      rect: 'rounded-md',
14      circle: 'rounded-full',
15      pill: 'rounded-full',
16      text: 'rounded w-full h-4',
17    },
18    animation: {
19      pulse: 'animate-pulse',
20      wave: 'relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent)]',
21      none: '',
22    },
23  },
24  defaultVariants: {
25    shape: 'rect',
26    animation: 'pulse',
27  },
28});
29 
30interface ISkeletonProps extends ComponentProps<'div'>, VariantProps<typeof SKELETON_VARIANTS> {}
31 
32/** Placeholder loading skeleton. */
33function Skeleton({ className, shape, animation, ...props }: ISkeletonProps) {
34  return <div className={cn(SKELETON_VARIANTS({ shape, animation, className }))} {...props} />;
35}
36 
37export { Skeleton, SKELETON_VARIANTS };