Skeleton Shimmer

// Keyframes cannot be expressed as Tailwind utilities, so they live in a style element.
const css = `
@keyframes skeleton-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
`;

// One sheen over the whole card, so the light crosses every placeholder
// together instead of each shape shimmering on its own clock.
const sheenStyle: React.CSSProperties = {
  background: 'linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%)',
  backgroundSize: '200% 100%',
  animation: 'skeleton-sweep 1.6s linear infinite',
};

export function SkeletonShimmer() {
  return (
    <div
      role="status"
      aria-label="Loading"
      className="relative flex w-[260px] flex-col gap-2 overflow-hidden rounded-xl border border-[rgba(138,141,150,0.2)] p-4"
    >
      <style>{css}</style>
      <span className="mb-2 h-10 w-10 rounded-full bg-[rgba(138,141,150,0.25)]" />
      <span className="h-2.5 w-full rounded-[5px] bg-[rgba(138,141,150,0.25)]" />
      <span className="h-2.5 w-4/5 rounded-[5px] bg-[rgba(138,141,150,0.25)]" />
      <span className="h-2.5 w-3/5 rounded-[5px] bg-[rgba(138,141,150,0.25)]" />
      <span aria-hidden="true" style={sheenStyle} className="pointer-events-none absolute inset-0" />
    </div>
  );
}