# Loading States

## Skeleton Screens
- Use for initial page loads and list/grid content
- Match the layout shape of the loaded content
- Subtle pulse animation (Tailwind `animate-pulse`)
- Never use spinners for content that has a known layout shape

## Spinners
- Use only for actions where the result shape is unknown (form submission, payment processing)
- Center in the action area
- Include descriptive text below ("Processing payment...")

## Progressive Loading
- Load above-the-fold content first
- Images: low-quality placeholder → full resolution (blur-up technique)
- Lists: load first 20 items, infinite scroll for more