feedback
Optimistic Action
Reflects a user action immediately, then confirms it or rolls the visible state back without a fake backend.
- feedback
- optimistic
- pending
- rollback
- recovery
A domain action leads with its likely result while acknowledgement and rollback remain explicit.
Live preview
Quick usage
import { OptimisticAction } from "@pinky-ui/systems";
<OptimisticAction label="Follow" onAction={confirmFollow} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add optimistic-actionPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
Purpose
Reflect a likely user action immediately, then keep acknowledgement and rollback explicit.
Use when
Follow, save, react, archive or toggle actions have a predictable local result and a remote confirmation can arrive afterward.
Avoid
Irreversible transactions, payments or actions where showing success before authority exists would mislead the user.
Accessibility
Expose the optimistic state with aria-pressed or an equivalent semantic value, keep the action label meaningful, and announce confirmation or rollback once.
Keyboard and touch
Use a native button with a comfortable target. Enter and Space must trigger the same optimistic path, and retry must remain available without hover.
Reduced motion and performance
Keep the state change immediate when motion is reduced. Abort stale promises and never update state after unmount.
Composition and anti-patterns
Keep pending acknowledgement close to the action. Do not hide a failed rollback in a global toast or imply that a network request succeeded merely because the UI changed.