Skip to content

perf: add optimistic updates to database row and property mutations #804

@zacharias-ona

Description

@zacharias-ona

Description

Database mutations (add row, delete row, update cell value, add/delete property) currently wait for the Supabase round-trip before updating the UI. This creates noticeable lag, especially on slower connections. The database domain had 30+ bug fixes in the past week, many related to mutation flows and error handling — the error capture and retry infrastructure is now solid (see #797, #731, #686), making this a good time to layer in optimistic updates.

Optimistic updates would immediately reflect changes in the local state and roll back on failure, using the existing error toast + retry pattern from #797.

Approval Required

This is a HIGH risk enhancement:

  • Changes mutation behavior across all database views (table, board, list, calendar, gallery)
  • Modifies the use-database-rows, use-database-properties, and use-database-views hooks
  • Rollback logic must handle concurrent mutations correctly
  • Incorrect optimistic state could cause data loss perception (user thinks save succeeded when it didn't)

Comment "approved" to release this to the automation queue.

Acceptance Criteria

  • useAddRow optimistically inserts a row into the local cache before the Supabase call resolves
  • useDeleteRow optimistically removes the row from the local cache
  • useUpdateRowValue optimistically updates the cell value in the local cache
  • useAddProperty and useDeleteProperty optimistically update the property list
  • On mutation failure, the optimistic change is rolled back and an error toast with retry action is shown (reuse pattern from enhancement: add retry actions to database mutation error toasts #797)
  • Concurrent mutations do not corrupt local state (e.g., add row + delete different row simultaneously)
  • All existing database E2E tests pass without modification
  • pnpm lint && pnpm typecheck && pnpm test pass

Dependencies

None

Technical Notes

  • The mutation hooks are in src/lib/supabase/use-database-rows.ts, use-database-properties.ts, use-database-views.ts.
  • Use React's useOptimistic or a manual pattern with useState + rollback callback.
  • The error toast retry pattern is established in enhancement: add retry actions to database mutation error toasts #797 — reuse toast.error with an action button that re-invokes the mutation.
  • Reference .agents/conventions.md for the Supabase mutation patterns.
  • Existing unit tests for the hooks (18-24 tests each) will need updates to verify optimistic behavior and rollback.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestneeds-humanNeeds human input — automation will re-queue when user respondspriority:3

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions