Add a caption for the user while the item is being deleted

Question

I have a button on my site with which the user can remove any position from the table.

Procedure: the user clicks on the delete button (in my case it is DeleteForeverIcon) -> a window appears in which the user can cancel the action or confirm -> after confirming the action, the process of deleting the entry begins and the dialog box disappears when the deletion of the entry is completed

Everything is simple here and everything works. Code below. Problem description after code

export function DeleteButton({ item }) {
  const { urlParams } = useContext(PageContext)
  const { firestore } = useContext(AppContext)
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

return <ButtonGroup>
          <DeleteForeverIcon onClick={handleClickOpen} />
         
          <Dialog open={open} onClose={handleClose}>
              
              <DialogActions>
                <Button onClick={handleClose}>Cancel</Button>
                <Button color="error" onClick={() => { deleteItem(item, firestore, urlParams) }}>
                  Confirm
                </Button>
              </DialogActions>

          </Dialog>

  </ButtonGroup >
}

The problem is that if the record is too large in size, then the deletion process takes a long time, not instantly (from 2 seconds or more). And all this time, while the deletion process is in progress, the dialog box is open without any signs of an ongoing action. And the user may get the impression that the site is frozen or the delete button is not working. I would like that after clicking on the "Сonfirm" button, during the deletion process there would be an inscription notifying about this - The deletion process is in progress (or something similar. Here I will come up with it myself, the main thing for me is to understand the essence of how to do it)

export function deleteItem(item, firestore) {
    if (item instanceof Record) { deleteRecord(firestore, item.id)}
   
}

Answer 1

What you can do about it is to display a loading state on your button after the action has been triggered. Something like:

const [loading, setLoading] = useState(false);

const onSomeActionTriggered = async () => {
  try {
    setLoading(true);
    await someLongDurationAction();
  } finally {
    setLoading(false);
  }
};

return <button>{loading ? 'Loading...' : 'Confirm'}</button>

Here's a Codesandbox example of what I mean.

You could also trigger a loading state after the alert has been closed, if you think that would be better for your UX.