Interaction states · Play folder

Loading state explorations

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

Category
Interaction states
Tools
Figma · Interaction design
Format
Downloadable MD brief
Use with
AI agent context
Perceived performance

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.

Let's build something

Got something you want shipped well?
Let's talk.

Open to work across senior product, UI/UX, full-stack, and AI-forward opportunities where design taste and shipping speed both matter.

Where
Bogotá, Colombia · remote worldwide
Response time
Usually within 24 hours
Find me
@jpcasabianca · everywhere