Skeleto

<AutoSkeleton>

The main component. Wrap any subtree, pass loading, done.

Full prop reference

type AutoSkeletonProps = {
  loading: boolean;
  children: React.ReactNode;

  // Animation
  animation?: 'shimmer' | 'pulse' | 'wave' | 'none';  // default 'shimmer'
  speed?: number;                    // seconds per cycle, default 1.4
  direction?: 'ltr' | 'rtl';         // default 'ltr'

  // Appearance
  baseColor?: string;
  highlightColor?: string;
  borderRadius?: number | 'inherit'; // default 'inherit'
  opacity?: number;                  // default 1

  // Behavior
  transition?: number;               // ms fade, default 200
  staggerChildren?: number;          // ms between child reveals, default 0
  minDuration?: number;              // ms minimum skeleton display, default 0

  // Advanced
  preserveLayout?: boolean;          // default true
  maxDepth?: number;                 // default 12
  onMeasure?: (nodes: MeasuredNode[]) => void;
};

animation

Choose the visual style. All four are 60 FPS — animation runs on the compositor.

animation="shimmer"
Loading content
animation="pulse"
Loading content
animation="wave"
Loading content
animation="none"
Loading content

speed

Seconds per animation cycle. Lower = faster.

Loading content

staggerChildren

Stagger the start of each leaf's animation by N milliseconds. Creates a wave-style reveal.

Loading content
Show code
<AutoSkeleton loading={loading} staggerChildren={80}>
  <Feed />
</AutoSkeleton>

minDuration

Prevents skeleton flicker. If your data resolves in 50ms, the skeleton would otherwise flash for one frame and disappear — looking like a glitch. Set minDuration={400} and the skeleton is held visible for at least 400ms regardless of how fast the network responds.

No minDuration
Ada LovelaceMathematician, writer, and arguably the first computer programmer. Worked with Charles Babbage on the Analytical Engine.
minDuration={600}
Ada LovelaceMathematician, writer, and arguably the first computer programmer. Worked with Charles Babbage on the Analytical Engine.

transition

Cross-fade duration in ms when toggling.

Loading content

baseColor & highlightColor

Override colors per-instance.

Loading content
Show code
<AutoSkeleton
  loading={loading}
  baseColor="#1e293b"
  highlightColor="#334155"
>
  <UserCard />
</AutoSkeleton>