Optimistic UI
乐观界面
Aliases:Optimistic UI乐观更新乐观界面先改后等即时假成功先显示后确认
What is it
Update the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- High-frequency light actions — likes, saves, follows
- Flaky networks where responsiveness matters
- Failures that are safely reversible and low-stakes
✕ When not to use
- Irreversible or high-value operations — payments, orders
- Results that decide which flow branch comes next
- Costly or confusing rollbacks
Variants
Pending
等待确认
Optimistic value carries a pending state until the request settles
Rollback
失败回滚
On failure the change is reverted with a visible notice
Queued
排队确认
Rapid actions queue up and settle one by one
Implementation
opacity transitiontransform scaleanimationkeyframesApply the local state change synchronously on click and enter a pending state (dimmed or gently pulsing); settle when the request resolves. On failure restore the previous value and surface a rollback notice. Sequence rapid requests to prevent out-of-order overwrites; pair the rollback notice with undo where relevant. Respect prefers-reduced-motion for the pending animation.
Related concepts
A small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsUsed withHandles risky actions with "apply first, allow regret": deletions take effect immediately and show the result, while a snackbar with a countdown offers one-tap undo until the timer expires. Unlike confirmation dialogs it never interrupts the flow, and unlike a single confirm it leaves a real window to change one's mind.
PatternsSimilarGrey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsSimilarA continuously rotating ring or dots that says "work in progress". Tiny in footprint and universally understood, it fits inside buttons, cursors or small regions as lightweight feedback. It communicates busyness only — neither progress amount nor time remaining.
MotionUsed withA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed with