loading-empty-error-states
Design the three states every data UI forgets. Use for any component that fetches or lists data.
Datos de origen
- Repositorio
- Archive228/loopkit
- Última actividad en el origen
- 29 de junio de 2026 a las 22:25
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 757
- Forks
- 124
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- loading-empty-error-states
- description
- Design the three states every data UI forgets. Use for any component that fetches or lists data.
- when_to_use
- a list, a fetch, a dashboard, anything async in the UI
# Loading / Empty / Error States
AI-built UIs handle the happy path and crash on the other three. Design all four:
- **Loading** — skeletons that match the final layout (not a centered spinner that shifts everything).
- **Empty** — a real first-run state: what it is, and the one action to fill it. Not a blank box.
- **Error** — what failed, in human terms, plus a retry. Never a raw stack trace or silent nothing.
- **Partial** — slow/streaming data, optimistic updates that can roll back.
For each fetch in the diff, confirm all four exist. The empty and error states are where products feel broken.
Ver en GitHub