# Skeleton VS Optimistic UI: Loading Strategies

> Learn the difference between Skeleton Screens and Optimistic UI, and how to choose the best loading strategy to improve the perceived performance of your digital product.

*Tags: ux, concept, ui-design, product-design, development*

---


> [!info] Quick Definition
> **Skeleton Screens** are gray placeholders that mimic the final structure of the page while data is loading. **Optimistic UI** is a technique that shows the result of an action immediately, assuming the server will respond successfully.


## The Art of Waiting: Perceived Performance

In modern product design, speed is not just a matter of real milliseconds (latency), but of how the user **feels** the system is responding. Both techniques seek to reduce user anxiety during loading, but they are applied at different points in the flow.

## 1. Skeleton Screens: Structure Preloading

Instead of showing a spinning wheel (which generates a sense of uncertainty), we show an "X-ray" of what is to come.
- **When to use it:** When loading full pages, data lists, or new content blocks (e.g., the Facebook or LinkedIn feed).
- **UX Advantage:** The user quickly understands the hierarchy of information and where each element will appear, which reduces cognitive load.
- **Design Tip:** Skeleton blocks should have a subtle "pulse" or glow movement to indicate that the system is alive and working.

## 2. Optimistic UI: Immediate Response

It is based on the premise that 99% of user actions will succeed. We update the interface instantly without waiting for server confirmation.
- **When to use it:** In binary or low-risk actions like giving a "Like," sending a chat message, or marking a task as complete.
- **UX Advantage:** The application feels instant and reactive, as if it were a native offline app.
- **Danger:** If the action fails, we must manage the **Rollback** (reversing the visual change) gracefully without frustrating the user.

## Comparison: Which to Choose at Each Moment?

| Feature | Skeleton Screens | Optimistic UI |
| :--- | :--- | :--- |
| **Moment** | When **entering** a screen. | When **performing** an action. |
| **Data State** | Unknown data (coming from server). | Known data (provided by user). |
| **Goal** | Reduce loading uncertainty. | Eliminate the friction of waiting. |
| **Risk** | Low (only a visualization). | Medium (requires error/rollback logic). |

## The "Safety Net" of Loading Design

A world-class product uses both in combination:
1.  You enter your news feed and see **Skeleton Screens** while posts load.
2.  You click "Follow" on a user and the interface changes to "Following" **optimistically** in a millisecond.
3.  If you suddenly lose connection, the button goes back to "Follow" with a small error notice (**Rollback**).

## Mentor's Tips

- **Don't Overuse Skeletons:** If content loads in less than 300ms, it's sometimes better not to show anything; the skeleton's flicker can be more annoying than a fast direct load.
- **Skeleton Design Matters:** Make sure skeleton shapes match the final design exactly. If the skeleton is rectangular and the final avatar is round, the visual change will be jarring (Jank).
- **Involve Development:** These techniques require close coordination with the app's data architecture. Don't design them in isolation without knowing if your backend supports them.

## Useful Resources and Tools

- **Luke Wroblewski:** [Skeleton Screens for Perceived Performance](https://www.lukew.com/ff/entry.asp?1797)
- **NNGroup:** [Optimistic UI - Response Time Limits](https://www.nngroup.com/articles/response-times-3-important-limits/)
- **Smashing Magazine:** [Designing for Perceived Performance](https://www.smashingmagazine.com/2021/01/performance-budgeting-web-projects/)
- **Articles:** [Everything you need to know about Skeleton Screens](https://uxdesign.cc/everything-you-need-to-know-about-skeleton-screens-9a3e8e3e8e3)
---
[[optimistic-updates-rollback]]
[[perceived-performance-design]]
[[interaction-latency-budgets]]
[[loading-states]]


---

Source: https://www.fernandoux.com/en/wiki/concepts/skeleton-vs-optimistic-ui/