[FE] Remove button should be disabled for billable members pending removal

This Issue is aimed at exploring possible UX solutions for showing billable members that are pending deletion, in the scenario where the billable members page is visited while a member is pending deletion.

Context

[FE] Support async billable member removal (#480302 - closed) made it possible to delete billable members async. In the current status, the following UI shows after successfully triggering a member deletion:

Concern

The operation might take a certain time. If during that time, the page is visited again (e.g., refreshed), the UI will not show the pending member is being deleted, because this state is not stored.

Possible solution(s)

1) Local storage

  1. When first triggering the member deletion, store the state in the browser local storage.
  2. On subsequent visits, disable the button if the members in the list match the member(s) in local storage
  3. (Expire the record in local storage after 24 hours)

Pro:

  1. Does not add query to DB
  2. Presence in local storage does not affect behaviour
  3. Eventually consistent

Cons

  1. Only works for the single Owner's browser. Only the Owner who has performed the action will see this
  2. (If the Owner removes the member once more, nothing happens. After that, the state will be consistent)

2) API update

  1. Modify the API endpoint that provides the billable users to include whether or not they are scheduled for deletion

Pro:

  1. Works for everyone

Cons

  1. Adds an extra DB query per user
Edited by Angelo Gulina