Skeleton

/* Bare Skeleton Loader Animation */
@keyframes bare-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.bare-skeleton {
  animation: bare-skeleton-shimmer 2.5s infinite linear;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--border-color) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  border-radius: 4px;
}

import { HTMLAttributes } from "react";

export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  width?: string | number;
  height?: string | number;
  circle?: boolean;
}

/**
 * A highly performant, zero-dependency skeleton loader.
 * Uses pure CSS animations to indicate a loading state without bloating the bundle.
 */
export const Skeleton = ({
  width,
  height,
  circle,
  className = "",
  style,
  ...props
}: SkeletonProps) => {
  return (
    <div
      className={`bare-skeleton ${className}`}
      style={{
        width: width || "100%",
        height: height || "1.5rem",
        borderRadius: circle ? "50%" : "4px",
        ...style,
      }}
      {...props}
    />
  );
};

import { Skeleton } from '@/components/ui/skeleton';

export default function MyComponent() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      {/* Circle variant for avatars */}
      <Skeleton circle width="48px" height="48px" />

      {/* Standard variant for text/blocks */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
        <Skeleton width="60%" height="1.2rem" />
        <Skeleton width="40%" height="0.9rem" />
      </div>
    </div>
  );
}