List loading / empty / error

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Product task: List loading / empty / error
Skeleton first paint, honest empty state, retryable errors.

Compose these UI patterns:
- Skeleton Screen: Placeholder shapes that mirror upcoming content so loading feels structured, not empty.; use shadcn Skeleton / custom pulse blocks
- Empty State: A deliberate screen when a list or view has no items—guidance, not a blank void.; use custom empty panel / shadcn patterns
- Spinner / Activity Indicator: A compact motion indicator that something is busy—usually circular or system-native.; use lucide Loader2 animate-spin / shadcn patterns


Brief:
Build list UI with mutually exclusive states:

1. First load: Skeleton placeholders that match the final card layout (not a full-page Spinner).
2. Empty: Empty state with short reason + one CTA (e.g. "Add item" / "Clear filters").
3. Load more: small Spinner at the bottom only — do not re-skeleton the whole list.
4. Error: clear copy + Retry; while retrying, show loading on the control.
5. Only one primary state visible at a time.

Match existing list item design in the project.

Implement as a minimal, coherent flow. Match existing project style.