SayUI
← Library→ Turn this into a prompt
Status & loading

Skeleton Screen

Placeholder shapes that mirror upcoming content so loading feels structured, not empty.

Also known as placeholder shimmer · content placeholder · loading skeleton

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Skeleton Screen".

Replace the full-page spinner with a skeleton that mirrors the final layout: avatar circle, two title lines, and three body lines with a soft pulse animation; swap to real content when data resolves.

Anatomy:
- blocks: Match real content proportions: avatar circle, title line, body lines.
- shimmer / pulse: Subtle motion so it reads as loading, not broken gray UI.

Preferred API / pattern: `shadcn Skeleton / custom pulse blocks`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Skeleton looks nothing like the real layout
  • ○Avoid: Skeleton never ends on error
  • ○Avoid: Using skeleton for a 200ms local toggle

In plain wordsHow people search for it

“the gray blocks that show the shape of the page while it loads”“those pulsing rectangles instead of a spinner”“fake layout placeholders before the real content shows up”

AnatomyOpen for part names

blocks
Match real content proportions: avatar circle, title line, body lines.
shimmer / pulse
Subtle motion so it reads as loading, not broken gray UI.

How to write itOpen for stack patterns

Web (HTML/CSS)div placeholders + shimmer animation
React + Tailwind + shadcn/uishadcn Skeleton / custom pulse blocks
SwiftUIredacted(reason: .placeholder) / .skeleton
Ant Design<Skeleton> / <Skeleton.Button>

Notes

Skeletons reduce perceived wait when layout is predictable. Don't invent a skeleton denser than the real page. Prefer skeletons for content-heavy first paint; a small spinner is fine for tiny local actions. Avoid infinite skeletons—timeout into an empty or error state.

Help me choose: Skeleton vs Spinner →Help me choose: Empty vs Skeleton →

Common mistakesHumans and models trip here

  • Skeleton looks nothing like the real layout: users get a layout jump when content arrives.
  • Skeleton never ends on error: always pair with timeout + empty/error UI.
  • Using skeleton for a 200ms local toggle: overkill—just update the control.

More failure symptoms on AI broke it.

Related patterns

Spinner / Activity IndicatorA compact motion indicator that something is busy—usually circular or system-native.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.

Spotted a wrong name or missing pattern?

Message on X