Skeleton

"use client";

import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

// A skeleton that takes its shape from the real layout instead of a hand-drawn
// copy of it. While loading, the content renders invisibly (with placeholder
// data if the real data isn't there yet) and every line of text, image, icon
// and control in it is measured: text gets one bar per wrapped line, at the
// line's real width, and everything else gets its own box with its own corner
// radius. One shimmer sweeps across all of them at once, so a long list costs
// a single animation. When loading ends, the bars fade away top to bottom
// while the content wipes in behind them, rather than everything popping in
// at once.
//
// Shape it by hand where needed: `data-skeleton` turns an element into one
// box (an avatar, a chart), `data-skeleton-ignore` leaves it out.

export type SkeletonProps = {
  loading: boolean;
  children: ReactNode;
  /** One sweep across the content, in seconds. 0 turns the shimmer off. */
  shimmerDuration?: number;
  /** How long the reveal takes from top to bottom, in seconds. */