# Loading state explorations

A study of loading states, skeletons, and interface pacing for moments when the product has to ask the user to wait.

## Use this with an AI agent

Use this as context to audit an interface for missing pending, loading, optimistic, empty, and error states.

Paste this file into Claude, ChatGPT, Cursor, Codex, Gemini, or another AI agent before a design critique, implementation pass, content review, or product-planning session.

## What is included

- Async state checklist
- Frontend implementation prompts
- Perceived-performance review

## Tools

- Figma
- Interaction design
- Frontend states
- UX review

## Skills

- Loading states
- Perceived performance
- Skeleton UI
- State design

## What this is

A visual exploration of waiting states: skeleton blocks, progress hints, soft motion ideas, and calm placeholders that make a product feel stable while work is happening.

## What it demonstrates

Loading is not a technical footnote. It is part of the user experience. The right state can reduce anxiety, set expectations, and keep the layout from jumping around.

## Design notes

The study uses simple vertical forms to test rhythm and emphasis. One active element carries focus while the others stay quiet enough to read as background progress.

## How it connects to product work

This translates directly to implementation: pending states, optimistic UI, empty states, async errors, and the handoff between frontend and backend behavior.

## What to look for

### Recruiter signal

Shows attention to the operational details that make a product feel reliable after the mockup: latency, layout stability, and state coverage.

### Useful output

A practical state inventory that can be used during frontend implementation or QA for async product flows.

### Next iteration

Create a small component gallery with loading, empty, error, partial-success, and retry variants.

## Related links

- AI Feature UX Checklist: /resources/ai-feature-ux-checklist
- React Dashboard Shell: /resources/react-dashboard-shell

---

Source: JP Casabianca Play study
URL: /play/loading-state-explorations