Design Effective Skeleton Screen Loading States for UI Components

Design a comprehensive skeleton screen (content placeholder) system for [APPLICATION TYPE, e.g., e-commerce app, news platform, SaaS dashboard] built with [TECH STACK/FRAMEWORK]. The application features [LIST KEY CONTENT TYPES, e.g., product cards, user feeds, data tables, media galleries]. Create a detailed skeleton screen design specification for each component: 1. **Component Inventory**: For each of the following UI components, design a corresponding skeleton state: - [COMPONENT 1, e.g., Product Card] - [COMPONENT 2, e.g., User Comment Thread] - [COMPONENT 3, e.g., Dashboard Widget] - [COMPONENT 4, e.g., Navigation Sidebar] - [COMPONENT 5, e.g., Media Gallery Grid] 2. **Shape & Proportion Rules**: Define the placeholder shapes (rectangles, circles, rounded bars) that map to each content type (text lines, avatars, images, buttons). Specify exact proportions relative to the actual content — e.g., text placeholders should match line height and paragraph structure. 3. **Animation Pattern**: Choose and justify one animation approach: - Pulse/fade animation (specify opacity range and duration) - Shimmer/wave effect (specify gradient direction, speed, and color stops) - Static placeholders (justify when motion is unnecessary) 4. **Color System**: Define skeleton colors for both light mode ([LIGHT BG COLOR]) and dark mode ([DARK BG COLOR]). Provide base color, highlight color, and background color values in HEX and RGB. 5. **Transition Choreography**: Describe how skeleton screens transition to real content. Should elements fade in simultaneously, stagger sequentially, or replace inline? Specify timing for each approach. 6. **Performance Guidelines**: Recommend maximum skeleton display duration before showing a timeout message. Define fallback states if loading exceeds [SECONDS] seconds. 7. **Accessibility**: Ensure screen readers announce loading states with appropriate ARIA attributes (aria-busy, aria-live). Provide code snippets.