Why your product feels broken
The loading spinner is lying
You know what sucks?
You enter your information on a site, hit submit, and a spinning little wheel appears, seemingly forever.
You have no idea if the system is working or broken. That time gap is unknowable to you. How long is this going to take? Did it work?
It’s an important design decision, yet most products treat it as an afterthought.
Loading states are a critical piece of user communication. They tells users how long to expect, what’s coming next, and if your product can be trusted.
The Four Loading Patterns
Spinner
“I’m working, but I don’t know how long”
Best for fast, unpredictable waits under ~3-4 seconds.
Failure mode: the zombie spinner that never resolves, has no timeout, no error, just eternal hope. Anything past 10 seconds feels broken.
Progress Bar
“Here’s exactly where we are”
Best for long, measurable operations like uploads, processing, and multi-step jobs.
Even fake progress (a bar that slows near the end) measurably reduces perceived wait time.
Skeleton Screen
“Something is coming, and it looks like this”
Best for content-heavy layouts like feeds, dashboards, cards. In other words, when there is layout to preview.
These set spatial expectations before content loads, reduces layout shift, makes the wait feel shorter. LinkedIn, Notion do this well.
Optimistic Update
“Done — unless something goes wrong”
Best for low-risk, high-frequency actions: likes, sends, saves.
The product assumes the action will be successful and corrects only on failure. Makes the app feel instant. Note: Requires a good error fallback.
Use This Today
Audit your product’s 3 most-used flows and ask:
Does every action get immediate acknowledgment?
For waits over 3 seconds, does the user know how much longer?
LLM Prompt
You are a UX designer reviewing a product for loading state quality. I’m going to share a product experience — as a screenshot, URL, or codebase.
First, identify every moment where the system is processing, loading, or waiting for a response.
For each moment, use the following decision logic to recommend the right loading pattern. If you can determine the answer from what I’ve shared, make the recommendation directly. If you can’t, ask me one clarifying question at a time before proceeding.
1. Is content loading into a layout (a feed, dashboard, or set of cards)?
→ If yes: use a skeleton screen.
2. If not — is this a high-confidence, fast action (a like, a save, a send)?
→ If yes: use an optimistic update. Assume success and correct only on failure.
3. If not — do you know roughly how long the wait will take?
→ If yes: use a progress bar.
→ If no: use a spinner — but always set a timeout so it can’t run forever.
For each moment, also describe what the error or failure state should look like if the action doesn’t resolve cleanly.
Finally, flag any moments where no loading state currently exists and one is needed.
If anything is unclear from what I’ve shared, ask one clarifying question at a time before proceeding.
About Us
Design Language is a newsletter for all product builders (PMs, Engineers, Founders, etc) who want to improve their design literacy, hone their sense of tase, and improve their craft when building products.
Jeremy Belcher is a 15 year product and design veteran. He has designed UX/UI for products used by tens of millions for brands like Google, Salesforce, Saturday Night Live, DirecTV, BMW, Emirates, Visa and in the past several years has focused on new enterprise workflow products. He runs the product studio Robot Heart, which designs, builds, and validates 0 → 1 B2B workflow tools for teams and founders.
David Issa is a digital strategy and product design leader with over 15 years of experience guiding companies through transformation. He has helped scale products and teams across healthcare, fintech, and enterprise software, translating complex systems into human-centered experiences. David runs a strategic design practice focused on aligning purpose, architecture, and execution—bridging design, AI, and organizational strategy to help teams build with clarity and intent.