Optimistic UI with 5-Second Undo Grace Period
Instantly update the user interface and provide a 5-second undo grace period before firing the remote mutation.
When deleting items, archive records immediately in local state and give the user 5 seconds to undo before dispatching the destructive API call.
export function deleteEmailOptimistic(emailId: string) { let isCancelled = false;
// 1. Remove from local UI immediately (optimistic update) removeEmailFromList(emailId);
// 2. Schedule server deletion after 5 seconds const timer = setTimeout(async () => { if (!isCancelled) { await api.deleteEmailPermanently(emailId); } }, 5000);
// 3. Show undo toast with progress countdown
toast('Conversation moved to Trash', {
duration: 5000,
progress: true,
action: {
label: 'Undo',
onClick: () => {
isCancelled = true;
clearTimeout(timer);
restoreEmailToList(emailId);
toast.info('Deletion undone.');
},
},
});
}
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.