Instructor: 0:00 Let's go one step at a time and start by disabling the buttons when isLoading is true, so I shouldn't be able to click one of these.

0:07 Here, that's pretty simple. I'll select both buttons and add the disabled attribute, and the value can be linked to the isLoading prop. If isLoading is true, the buttons are disabled, which seems to be exactly what we want.

0:20 Let's give it a try. Trigger, and you can see they're disabled, and I cannot click on them. Perfect. That's step one of the puzzle, but we can still now click outside of the modal.

0:30 To solve that, we can scroll up to our Dialog component. You can see there is the onClose prop. Remember, this onClose gets fired when we click outside or hit the Escape key, so we need to pass a function in this onClose prop.

0:43 If we were to pass an empty function, we should now be totally unable to close the modal by clicking outside or hitting the Escape key.

0:52 Essentially, we want that scenario while isLoading is true. I can have a ternary operator that says that if isLoading is true, have an empty function to basically short circuit the ability to close the modal.

1:05 If it's not loading, then provide the normal onClose function passed as a prop. Now, if the modal is not loading, I can click outside or hit Escape, but while it's loading, clicking outside does nothing and hitting the Escape key does nothing.

1:23 By effectively freezing our modal while the asynchronous action is happening, we can avoid all sorts of troublesome scenarios that we don't want our users to be into.