Skip to content

Issue #5 - [UI] Add optimistic updates for user preferences

Description

User preference updates in the work items list currently show a loading state. Implement optimistic updates so the UI responds immediately while the API call completes in the background, improving perceived performance.

Current Behavior

  • User changes preference (e.g., view mode, sorting)
  • Loading indicator appears
  • UI waits for API response
  • Change applies after server confirms
  • Feels slow and unresponsive

Expected Behavior

  • User changes preference
  • UI updates immediately (optimistic)
  • API call happens in background
  • Revert if API fails
  • Feels fast and responsive

What You'll Learn

  • Optimistic UI patterns
  • Vue.js state management
  • GraphQL mutations
  • Error handling strategies

Implementation Steps

1. Remove Loading State

  • Find isFieldPreferenceLoading variable
  • Remove loading indicators tied to this state
  • UI should not block on preference changes

2. Add Optimistic Response

  • Locate preference mutation call
  • Add optimisticResponse object
  • Provide expected response shape
  • UI updates before API returns

3. Error Handling

  • Add error handling for failed updates
  • Revert UI on failure
  • Show error message to user

Example Pattern

// Before
const { loading } = useMutation(UPDATE_PREFERENCE);

// After
const { mutate } = useMutation(UPDATE_PREFERENCE, {
  optimisticResponse: {
    updatePreference: {
      preference: newValue
    }
  }
});

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below."