Design Principle
Stable skeletons reduce waiting anxiety and avoid layout shift when content appears.
Principle Stable skeletons reduce waiting anxiety and avoid layout shift when content appears.
Design action Use skeletons, placeholder dimensions, and staged text to keep structure; loading should not resize toolbars or primary navigation.
Examples Positive example: Search results, knowledge lists, generation workflows, and image assets. Counterexample: The page waits blank.
Apply when Search results, knowledge lists, generation workflows, and image assets. Data and AI requests may be delayed.
Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.
Agent Directive
Use skeletons, placeholder dimensions, and staged text to keep structure; loading should not resize toolbars or primary navigation.