Skip to content
Pinky UI

loading

Skeleton Morph

A quiet loading placeholder that resolves into the loaded content geometry.

  • loading
  • skeleton
  • content

Live preview

Quick usage

usage
import { SkeletonMorph } from "@pinky-ui/systems";

<SkeletonMorph loading={loading} skeleton={<CardSkeleton />}>{content}</SkeletonMorph>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use a placeholder whose geometry resembles the content that will arrive.

Use when

Content shape is known and a short wait would otherwise cause layout shift.

Avoid

Indefinite waits, fabricated content, or shimmer on every surface.

Accessibility

Expose busy state without reading decorative skeleton children as content.

Keyboard and touch

Do not trap focus in loading content; preserve controls when they are available.

Reduced motion and performance

Static fallback is the default under reduced motion; mount only the active placeholder.

Composition and anti-patterns

Use MultiStepProgress or CircularProgressMorph when actual progress is known.

Open this skill on its own page