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

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions