skeleton-auto

Automatic skeleton loading placeholders for React — no manual skeleton markup needed.

Wrap your real component with <Skeleton>. While loading, it measures your component's actual rendered size and shows a shimmer placeholder in that exact shape. When loading finishes, your real content just appears in place.

<Skeleton loading={isLoading}>
  <UserCard user={data} />
</Skeleton>

No need to hand-write skeleton markup that has to be kept in sync with your real component's layout.

Install

npm install skeleton-auto-react

React 16.8+ is required (peer dependency, not bundled).

Quick start

import { Skeleton } from "skeleton-auto-react";

function Profile({ user, loading }) {
  return (
    <Skeleton loading={loading}>
      <img src={user?.avatar} width={48} height={48} style={{ borderRadius: "50%" }} />
      <h3>{user?.name}</h3>
      <p>{user?.bio}</p>
    </Skeleton>
  );
}

The first render (before your real data arrives) is used to measure the component's dimensions, so make sure children render at their real intended size even with placeholder/empty props (e.g. render an <img> tag even if src is empty, rather than conditionally omitting it).

API

<Skeleton />

| Prop | Type | Default | Description | |-----------------------|-----------------------------------|--------------|----------------------------------------------------| | loading | boolean | — | Whether to show the placeholder. | | children | React.ReactNode | — | The real content to measure and eventually render. | | animation | "pulse" \| "wave" \| "none" | "pulse" | Placeholder animation style. | | shape | "rect" \| "circle" \| "text" | auto | Force a shape instead of using measured border-radius. | | className | string | — | Class applied to the outer wrapper. | | style | React.CSSProperties | — | Inline style merged onto the outer wrapper. | | baseColor | string | "#e2e2e2" | Background color of the shimmer placeholder. | | highlightColor | string | "#f0f0f0" | Highlight color used in the wave animation. | | placeholderClassName| string | — | Class applied to the shimmer placeholder overlay. |

useMeasure()

Low-level hook used internally. Returns { ref, dimensions } — attach ref to any element to get its live { width, height, borderRadius }, updated via ResizeObserver.

How it works

1. Your children are always rendered (even while "loading"), just with visibility: hidden — this keeps them in the layout so their size can be measured, without showing stale/empty content to the user.
2. A ResizeObserver tracks the children's rendered box.
3. A shimmer placeholder is absolutely positioned on top, matching that exact size, until loading becomes false.

Roadmap

• Auto-detect multiple child shapes (e.g. list of skeleton rows for arrays)
• Dark mode color presets
• Optional skip-measurement mode (fixed size skeleton, no invisible render pass)

License

MIT