Skeleton
You might say
While the page is loading, show gray placeholder blocks instead of a spinner the whole time.
Reserve the layout while content is loadingA skeleton roughly matches the shape of incoming content so the page stays stable during a short load. It should not be a detailed gray copy of every element. For a tiny action or an unknown layout, a simpler loading indicator may be clearer.
Anatomy
A set of placeholder color blocks, the shapes aligned with the real layout
Circle or square, corresponding to the media position
short, thick line
Long and short gray bars, imitating paragraphs
Variants
List Item
Place space when loading information flow and message list
Paragraph
The long article details page is loaded, first lay out the paragraph shape
Card
Pictures and cover cards occupy space before loading
Typical use cases
Article feed
Profile page
Dashboard cards
Search results