0:00 In appearance, our async loading management looks really good, but there's a few issues with it. Check this out. I will open the modal, and I will try to click on the action to trigger the loading.

0:09 Cancel it immediately, and reopen the modal within the two second timeout. Ready? Trigger, stop, reopen, and it just closed again right away.

0:19 The set timeout was still running, and after the two seconds, its set is open to and closed the modal on us. I can also close the modal mid async action by clicking outside, or by hitting the escape key.

0:33 None of these scenarios are ideal, and will likely bring some confusion and stress to your users. Did the action perform? Was my credit card charged? You don't want that to happen. We can do two things here to improve things drastically.

0:45 Once the asynchronous action is triggered, the first thing we want to do is disable the buttons. In other terms, we don't want to be able to click multiple times on the action.

0:54 The other thing we want to disable is the ability to click outside or hit the escape key. Essentially, we want to lock or freeze the modal while it's in its loading state.

1:04 The two places you'll need to operate for that is the action buttons in our modal component. You can take care of disabling the buttons while isLoading is true.

1:13 To lock the ability to close the modal, you might need to look into the onClose event here. Clicking outside the modal or hitting the escape key fires this onClose event. You've got all the tools you need. Good luck!