import * as React from 'react';

import { cn } from '@/lib/utils';

export type SkeletonProps = React.ComponentProps<'div'>;

/**
 * Placeholder block shown while content loads.
 *
 * Give it the same dimensions as the content it stands in for — a skeleton
 * that resizes on load causes a layout shift, which is worse than a spinner.
 */
function Skeleton({ className, ...props }: SkeletonProps) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden
      className={cn('animate-pulse rounded-md bg-accent', className)}
      {...props}
    />
  );
}

export { Skeleton };