Glimmer Skeleton

"use client";

import { type HTMLAttributes } from "react";
import { motion } from "motion/react";

import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  Types                                                              */
/* ------------------------------------------------------------------ */

export interface GlimmerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  /** Corner rounding of the block. [Optional, default: "md"] */
  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
  /** Set false to pause the sweep (e.g. offscreen lists). [Optional, default: true] */
  animate?: boolean;
}

const ROUNDED_CLASS: Record<NonNullable<GlimmerSkeletonProps["rounded"]>, string> = {
  none: "rounded-none",
  sm: "rounded-sm",
  md: "rounded-md",
  lg: "rounded-lg",
  xl: "rounded-xl",
  full: "rounded-full",
};

/* ------------------------------------------------------------------ */
/*  GlimmerSkeleton                                                    */
/* ------------------------------------------------------------------ */

/**
 * A loading placeholder block with a soft light sweep. The sweep is a
 * Motion-driven gradient pass, so any number of skeletons stay in sync
 * without injecting per-instance keyframes, and it hides itself under
 * prefers-reduced-motion.
 * @param {string} rounded - Corner rounding preset [Optional, default: "md"]
 * @param {boolean} animate - Whether the sweep runs [Optional, default: true]
 */
export function GlimmerSkeleton({
  className,
  rounded = "md",
  animate = true,
  ...props
}: GlimmerSkeletonProps) {
  return (
    <div
      role="status"
      aria-label="Loading"
      className={cn(
        "relative overflow-hidden bg-zinc-200/80 dark:bg-zinc-800/90",
        "[--sheen:rgba(255,255,255,0.65)] dark:[--sheen:rgba(255,255,255,0.07)]",
        ROUNDED_CLASS[rounded],
        className,
      )}
      {...props}
    >
      {animate && (
        <motion.span
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 motion-reduce:hidden"
          style={{
            background:
              "linear-gradient(90deg, transparent 0%, var(--sheen) 50%, transparent 100%)",
          }}
          initial={{ x: "-100%" }}
          animate={{ x: "100%" }}
          transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity }}
        />
      )}
    </div>
  );
}