Stick to the actual content shape
Use skeleton when knowing the content structure; Does not imply data is available.
Skeleton Design system
Indicates upcoming content without causing the layout to jump.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Stick to the actual content shape
The loading results card has an image area, title, and two description lines.
Variants and use cases
The frame is true to the real structure
Placeholder according to the area of the image and text that is about to appear so that the replacement content does not cause the layout to jump.
Compare waiting frames with real data with long headers; Main height keeps stable.
Example Image cards have the same square area and author footer as the loaded card.
Display nameActiveShape by data type
Choose circles, text or photo blocks by role, don't use one big block for everything.
Try listings with avatars and photos; Viewers can guess what content is about to appear.
Example The waiting avatar has a round frame, the title has a short line, and the image has a square frame.