AlertDialog and asynchronous operations

[andelopes]

Hi team!

I'm using the Alert Dialog to confirm a destructive user action. onConfirm I fire off an asynchronous operation and wait for it to complete before closing the modal. I noticed that there is no way to hook into the buttons in the dialog to prevent the user from continuously clicking or to signify a loading state.

I've used a spinner in the dialog body to signify the loading state, but the user is still able to keep clicking the confirmation button. Would you consider exposing a way to control the buttons / disable the dialog?

[TheSisb]

Hi @andelopes,

Alert Dialogs were not designed to require a loading state before being dismissed. They're designed to block the current action behind a secondary confirmation, rather than to be part of that action itself. My suggestions, in order of preference:

• Consider an optimistic ui approach
• Use the modal component or the modal-dialog primitive component

[nkrantz]

Jumping in here to add a bit more context on the Optimistic UI approach suggestion for your use case. The interaction would be: user clicks on the "Remove verified Caller ID" button in the Alert Dialog, dialog closes and user assumes the action was completed successfully. The user doesn't need to know that the action is async, and it's only if the action fails that a Toast notification would appear (error state). This flow simplifies the interaction for the user and only communicates essential information.

[andelopes]

Thanks for the article and the explanation! I think we'll go ahead with the modal

[kate-porter]

Hey @andelopes - we chatted about this more as a team, and we've created a ticket to adjust AlertDialog to allow for this. Here's the ticket if you want to watch it. Once that ticket is done, you'll be able to set the AlertDialog button to Loading (or any other action triggers that are available on Button, like Disabled, etc.).

Do consider, though, if keeping the user trapped in an AlertDialog while the action processes is a great user experience, especially if the process will take awhile. There may be a different way to indicate that the process is in progress without keeping the user stuck in the dialog (perhaps a Spinner or note inline next to the thing that is currently being deleted). The optimistic UI approach that @TheSisb suggested may also be a good option for you.

All that said, if you determine that the loading state on the AlertDialog Button is indeed the best user experience, you'll be able to do that soon!

Let us know if you have any other questions on this. Thanks for pointing it out!