Mobile App Loading States Design (Skeleton/Shimmer)
Full-screen spinner is a solution from 2015. User sees emptiness and does not understand what is loading: list of 3 items or 300, small block or entire screen. Skeleton screens solve this: user sees content structure before it appears, perceived loading speed increases.
How to Build Skeleton Correctly
Skeleton is not just gray rectangles. They must exactly match real content structure: width, height, element placement. If product card takes 120pt height with 80×80 photo, two text lines and price—skeleton must have same height and same placeholder placement.
Typical mistake: skeleton placeholder for text at 100% container width. In reality text does not look like that—it takes 60–80% of width on first line, 40–50% on last. Uneven placeholders look more natural.
Placeholder sizes:
- Heading: 16–20pt height, 60–70% of container width
- Body text, line: 12–14pt height, 85–95% (first line), 50–60% (last)
- Avatar: round placeholder, exact avatar size
- Image: rectangle with exact aspect ratio of original
Shimmer Animation
Shimmer is a gradient moving left-to-right over skeleton blocks, imitating "gleam." Implemented via:
- iOS:
CAGradientLayerwithCABasicAnimationonposition.x, or ready librarySkeletonView - Android: via Facebook's
Shimmer(fblibrary) or nativePlaceholderHighlightin Compose withModifier.placeholder - React Native:
react-native-skeleton-placeholderor customAnimated.Value - Flutter:
shimmerpackage from pub.dev
Shimmer colors: base color roughly #E0E0E0 (light mode), highlight #F5F5F5. In dark mode—#2A2A2A base, #3A3A3A highlight. Animation speed: 1–1.5 seconds per cycle.
How Many Skeleton Screens to Show
Mistake: show only one skeleton for first row, rest empty. Right: show 3–5 placeholder cards, imitating first visible screen. User should not see list ending—until data loads.
Transition from skeleton to real content: fade-in animation 200–300ms. Without animation, transition is harsh; with too long—annoying.
What to Do on Partial Load
Data does not always come as one block. Example: post text loaded, image still loading. In that case, skeleton remains only for image—we already show text. This requires separate ImagePlaceholder component with shimmer, living independently from text.
Timeline—1 day for complete skeleton-states set for all key screens. Cost is calculated individually.