Instructor: 0:00 Let's start by simply displaying the loading pinner regardless of the isLoading state just to see how it looks inside the button. We've got this Loading Spinner component, and what I want to do inside the confirm action button before worrying about the isLoading true prop is simply display this loading spinner. Let's take a look, and here it is in all its glory.

0:23 Obviously, we don't want to show the spinner initially and it should only show up when we click the "Delete My Account" button. All we need to do to make that happen is to conditionally display the loading spinner if isLoading is true.

0:38 Now the spinner is not going to show and nothing is going to happen on click because up here, we're setting the isLoading value to by default. Now we need to go where we consume the component and wire things up. We have this isLoading piece of state which we'll be able to use but before it does anything, let's make sure that we pass it to our Modal component. I'll delete this comment.

1:02 Next, let's take care of filling up the handleConfirm function. We want to setIsLoading to true, but just to play with the UI, let's, when the button is clicked, setIsLoading to what it's currently not. This will just flip the isLoading value back and forth between true and . Now when we click on our button, it's loading, and it's not. Look at this smooth little transition coming in. Very nice.

1:28 Cool. Let's change this to true, and then we simulate an async operation for two seconds. We want to close the modal after that, setIsOpen . Save that. Now when we click the delete account it loads for one, two, and the modal goes away. Job done? Not quite yet.

1:50 Let's reopen the modal, and uh-oh, it is still loading. That makes sense. We're closing the modal itself, but the Page component which is where the isLoading state is living is still here, and so the isLoading value is maintained throughout. An easy way out of this would be to also, at the end of the async function, setIsLoading to as well.

2:15 Now when I trigger the action, it loads for two seconds and then closes. Then when I reopen, it's closed. If you're like me and pay attention to details, you might notice something here. Let's open the modal again and watch the loading spinner carefully just before the model fades out. Loading, whoops, did you see that? The spinner goes away completely just before the modal closes.

2:41 Loading, not loading. That makes sense. We're setting isLoading to as soon as the timeout finishes. The only reason we see that little glitch is we have these transition components that fades out the modal slowly instead of disappearing abruptly.

2:57 Here what we'd ideally want to do is setIsLoading to after the transition has finished. After the leave transition. Guess what? Headless UI's transition component has an after-leave prop which can be used for this exact scenario.