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. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Use skeletons, placeholder dimensions, and staged text to keep structure; loading should not resize toolbars or primary navigation.