Skip to content

[Frontend] Optimistic UI updates for milestone actions #11

@Gbangbolaoluwagbemiga

Description

@Gbangbolaoluwagbemiga

Problem

Clicking "Approve Milestone" shows a spinner and waits ~5s for Stellar confirmation. The UI feels unresponsive.

Solution

Optimistic updates: show expected state immediately, reconcile on confirmation, roll back on error.

What needs to be done

  1. `ApprovalsPage` — on approve click, immediately move card to Approved state; on error roll back to Submitted
  2. `DashboardPage` — start work immediately shows In Progress
  3. Use TanStack Query's `onMutate` / `onError` / `onSettled` (already installed)

Acceptance criteria

  • Approve action shows optimistic state instantly
  • Error case rolls back with visible user feedback
  • No duplicate network calls
  • Works correctly with concurrent viewers

Metadata

Metadata

Assignees

No one assigned

    Labels

    frontendReact / TypeScript UI workperformanceSpeed or gas/cost optimizationuxUser-facing experience improvements

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions