UI & interface design

Loading States & Skeleton Screen Design System

Design comprehensive loading states and skeleton screens that reduce perceived wait times and maintain user engagement during content loading. This prompt helps create consistent, performance-optimized placeholders that improve user experience across web and mobile applications.

6 blanks to fill in · Added December 2024 · ui-design · loading-states · skeleton-screens · user-experience · progressive-loading

The prompt

6 blanks

You are an expert UI/UX designer specializing in loading states and skeleton screen design. Create a comprehensive loading state and skeleton screen design system for [PROJECT NAME OR APPLICATION TYPE].

Project Context:
- Platform: [WEB/MOBILE APP/DESKTOP/PROGRESSIVE WEB APP]
- Content Types: [TEXT-HEAVY/IMAGE-HEAVY/DATA TABLES/MIXED CONTENT/VIDEO]
- Average Load Times: [FAST <500MS/MODERATE 500MS-2S/SLOW >2S]
- Target Network Conditions: [4G/5G/VARIABLE/LOW-BANDWIDTH]
- Design System: [MATERIAL DESIGN/FLUENT/CUSTOM/BRAND-SPECIFIC]

Generate detailed specifications covering:

1. **Skeleton Screen Patterns**
   - Text content placeholders (headlines, paragraphs, captions)
   - Media placeholders (images, videos, avatars)
   - Card and list item structures
   - Data table and chart placeholders
   - Navigation and menu skeletons
   - Form field placeholders

2. **Animation Specifications**
   - Shimmer/pulse animation timing and easing
   - Wave progression patterns
   - Fade-in transition from skeleton to real content
   - Staggered loading sequences for multiple elements
   - Animation duration recommendations (1-2 seconds optimal)

3. **Visual Design Guidelines**
   - Color palette (neutral grays #e0e0e0 to #f5f5f5 range)
   - Shape specifications (rectangles for text, circles for avatars)
   - Spacing and hierarchy maintenance
   - Border radius and styling consistency
   - Dark mode adaptations

4. **Loading State Hierarchy**
   - Immediate feedback states (<100ms)
   - Short loading states (100ms-1s) - minimal indicators
   - Medium loading states (1-3s) - skeleton screens
   - Long loading states (>3s) - enhanced feedback with progress/educational content
   - Progressive loading strategies for complex pages

5. **Implementation Guidelines**
   - CSS-based vs component-based approaches
   - Performance optimization techniques (lightweight, GPU-accelerated)
   - Responsive behavior across breakpoints
   - Accessibility considerations (ARIA labels, reduced motion support)
   - Server-side rendering compatibility

6. **Alternative Loading Patterns**
   - Spinner/progress indicators (when to use vs skeleton)
   - Progress bars with accurate percentage tracking
   - Placeholder content vs blank states
   - Error state transitions and retry mechanisms
   - Optimistic UI updates

7. **Content-Specific Strategies**
   - Feed/timeline loading patterns
   - Search results progressive disclosure
   - Dashboard and analytics loading
   - Media gallery lazy loading
   - Infinite scroll continuation states

For each specification, provide:
- Visual descriptions or ASCII representations of skeleton layouts
- Exact timing values and animation curves
- CSS/JavaScript implementation examples
- Rationale based on perceived performance research
- Responsive behavior guidelines
- Accessibility compliance notes

Ensure all designs prioritize perceived performance reduction, maintain visual continuity with final content, and follow WCAG accessibility standards.

Open in ChatGPT

Blanks: Project name or application type · Web/mobile app/desktop/progressive web app · Text heavy/image heavy/data tables/mixed content/video · Fast <500ms/moderate 500ms 2s/slow >2s · 4g/5g/variable/low bandwidth · Material design/fluent/custom/brand specific

How to use it

Use this prompt to create a complete loading state design system that improves perceived performance and user engagement. Fill in the bracketed sections with your specific project details to receive tailored skeleton screen patterns, animation specifications, and implementation guidelines optimized for your content types and network conditions.

Tips

Use neutral gray colors (#e0e0e0 to #f5f5f5) for skeleton backgrounds to avoid visual conflicts when real content loads and maintain professional appearance
Match skeleton element dimensions precisely to final content layout to prevent jarring layout shifts and maintain visual continuity throughout the loading process
Reserve skeleton screens for loads exceeding 1 second; for faster loads use minimal spinners or no indicators to avoid unnecessary visual noise
Implement graceful error handling where skeleton screens transition smoothly to error states with retry options rather than abruptly disappearing
Test skeleton screens on actual slow network conditions using browser throttling tools to ensure they provide value under real-world constraints
Create reusable skeleton components that can be composed for different layouts rather than designing unique skeletons for every page, improving consistency and reducing development time

Understanding Content Structure

Analyze your application's content hierarchy before designing skeleton screens. Text-heavy applications need varied width rectangles mimicking paragraph structures, while image-heavy apps require proportional media containers. Data-rich dashboards benefit from table and chart outline skeletons. The skeleton should closely match the final layout's size, spacing, and hierarchical relationships to establish accurate user mental models and reduce cognitive load when real content appears.

Animation and Timing Strategy

Choose animation styles based on load duration expectations. For loads under 1 second, use subtle pulse animations or no animation at all. For 1-3 second loads, implement shimmer or wave effects with 1.5-2 second cycles using ease-in-out easing. Research shows skeleton screens with appropriate animations can extend tolerable wait times by 30-40%. Always provide smooth fade-in transitions from skeleton to real content to maintain visual continuity and avoid jarring switches.

Progressive and Conditional Loading

Implement smart loading strategies that activate only when needed. Use navigator.connection API to detect slow network conditions and enable skeleton screens only when estimated load time exceeds 500ms. For long pages, prioritize viewport-visible skeletons using Intersection Observer for lazy loading. Consider staggered loading where elements appear sequentially rather than simultaneously, creating a wave-like effect that feels more natural and maintains user attention.

Performance and Accessibility

Keep skeleton implementations lightweight to avoid becoming performance bottlenecks themselves. Use CSS transforms and opacity for animations rather than layout-affecting properties. Implement prefers-reduced-motion media queries to respect user accessibility preferences. Include appropriate ARIA labels indicating loading status for screen readers. Ensure skeleton screens work seamlessly with server-side rendering and maintain consistent behavior across all target devices and browsers.