UI components · Feedback
Skeleton
Also called: Skeleton screen, Skeleton loader, Placeholder loading, Shimmer
Before the data finishes loading, gray blocks sketch the rough outline of the page content, then get replaced by the real content once it arrives.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstWhen the article list loads for the first time, show a skeleton. For each item, put a 48px gray circle as the avatar placeholder on the left, and on the right a title bar at 40% width plus two body bars of different lengths. Show 5 items with a light shimmer moving left to right. When the data comes back, replace them in place, at the same size as the real content.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Skeleton is what you need.
Use Skeleton when
- A page, list, or card is loading for the first time, and its content layout is known ahead of time
- Loading takes one to a few seconds, and you want less jumping and fewer blank areas
- Content areas made of repeated cards, like feeds or product lists
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
The skeleton looks nothing like the real content, so the page still jumps a lot when the data arrives
- 02
The data has already loaded, but the skeleton is shown a bit longer on purpose
- 03
The API fails but the skeleton keeps flashing instead of switching to an error state
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Several light gray blocks the same size as the real content, such as circular avatar blocks, title bars, paragraph bars, and image blocks, often with a sweeping shimmer animation.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A skeleton draws gray placeholders in the shape of the real content: a gray circle where the avatar goes, a thick gray bar for the title, and a few thin gray bars of different lengths for the body text, usually with a shimmer that sweeps from left to right. When the data comes back, the gray blocks are replaced in place, so the layout doesn't jump and users know ahead of time what the page will look like.
It fits the first load of a page, list, or card. How it differs from a Spinner: a spinner only says "waiting," while a skeleton also shows the structure in advance. For small waits like a partial refresh or a button submit, a spinner fits better. How it differs from Progress: a progress bar shows how much of a task is done, and a skeleton doesn't show progress at all. The skeleton's shape must match the real content, or the page will still jump when it's swapped.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-skeleton- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-skeleton.el-skeleton[class*="MuiSkeleton-root"].arco-skeleton.t-skeleton.n-skeleton[data-slot="skeleton"].placeholder-glow.placeholder-wave.animate-pulse
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026