Optimistic UI
乐观更新
Update the interface to "already succeeded" before the server answers, and roll back if it fails.
Live Demo
Actually clickableA day on the coast
Not liked
What you just saw:The heart icon lighting up the instant you tap it on Xiaohongshu, a sent message appearing immediately in a WeChat thread with a sending marker, a todo item striking through the moment it is checked.
What it actually is
Optimistic UI is a qualitative leap in feel: tapping Like fills the icon instantly instead of spinning for two seconds. The price is that you must handle rollback, which means preparing exactly how you will undo the optimistic update.
Anatomy · What it's made of
Instant Apply立即生效
The UI changes first
Pending Marker处理中标记
Semi-transparent or a small spinner
Rollback回滚
Restored when the request fails
Error Toast错误提示
Explains what happened
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The action has a high success rate (>95%) | Yes |
| Failure can be rolled back cheaply | Yes |
| Waiting would make the interface feel sluggish | Yes |
| The action is irreversible (transfers, payments) | No |
| The failure rate is high | Depends |
Irreversible actions like transfers and payments must wait for server confirmation.
A rollback has to be surfaced: rolling back silently makes users think their action was lost.
Similar Patterns
Don't mix these upOptimistic UICurrent
乐观更新
Update the interface to "already succeeded" before the server answers, and roll back if it fails.
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
In one line:Update the interface to "already succeeded" before the server answers, and roll back if it fails.
Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
How to tell AI
Three levels of promptAdd the component name and specifics
When the user taps Like, light up the icon immediately; if the API call fails, roll it back to unliked and show a toast saying "Action failed. Please retry."
Don't just say this to AI
Bad → BetterDon't say this to AI
Update the interface first, roll back on failure.
Say this instead
Implement Optimistic UI: mutate local state first and record prevState, mark the element as pending during the request to prevent double clicks, and on failure restore the state plus show a "Action failed" toast with a "Retry" button — the rollback must be visible to the user, never silent.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.