<- BACK

Optimistic UI

List operations with syncing, synced, and confirmed states

Add & Delete Items

View Source

Instant updates with server sync indicators

Task 1
Task 2
  • Items appear in the UI immediately when added, before server confirmation completes.
  • Each item shows its sync state: “Syncing…” with spinner while pending, “Synced!” with checkmark for 2 seconds after confirmation, then no indicator once fully synced.
  • Delete operations remove items from the UI instantly with an exit animation via AnimatePresence.
  • Uses Date.now() for unique IDs to avoid collisions when rapidly adding multiple items.

Reorderable List

View Source

Drag items to reorder with server sync indicators

  • First item
  • Second item
  • Third item
  • Updates the UI immediately when the user reorders without waiting for server confirmation.
  • Tracks sync state per item with three visual states: syncing (spinner), just synced (checkmark for 2 seconds), and confirmed (no indicator).
  • Uses Framer Motion’s AnimatePresence for smooth enter/exit animations when items are added or removed.
  • For reorderable lists, shows a single sync indicator at the bottom rather than per-item to avoid visual clutter.
  • Clears the “Synced!” confirmation message after 2 seconds to prevent stale success indicators from cluttering the UI.