Empty, loading, error

Forces every list, search, and async view to ship an empty state, a loading state, and a recoverable error.

Lives in .cursor/rules and shapes how the agent works.

Install path

.cursor/rules/empty-states.mdc

---
description: Require empty, loading, and error states for lists and async views
globs: **/*.{tsx,jsx}
alwaysApply: false
---

# Empty, loading, error

A screen is not done when the happy path renders.

## Empty

- Say what is missing in plain language.
- Offer one next action (browse, compose, retry, clear search).
- Do not show a blank white card. Do not show fake rows pretending to be data.

## Loading

- Prefer skeletons that match the layout over a centered spinner.
- Keep the chrome (nav, filters) stable so the page does not jump.

## Error

- Name the failure. “Pack download failed” is better than “Something went wrong.”
- Provide retry when retry can work.
- Keep the rest of the page usable when only one panel failed.