0:00 We're going to add support for asynchronous task within our modal. We've added a new prop in our modal component, this isLoading prop, which is just a boolean. The modal itself is not going to be responsible for handling any of the loading logic.

0:13 It just receives this isLoading prop, which can be true or . At the bottom of the modal component, I've added a new loading spinner component, which is just a spinning SVG. Here's the modal we're working with.

0:26 We want to start showing the loading spinner when the confirm action button is clicked. Currently, nothing happens, and we're going to wire that all up. Your job in this challenge is to first set up the loading spinner to display inside the confirm button whenever isLoading is true.

0:43 You'll then need to go in the index page, where we're consuming the modal component. You can see we added this new isLoading piece of state. We've prepared this handle Confirm function, which is fired when the confirm action button is clicked.

0:57 You can see here we're calling handle Confirm. Your job is to use that isLoading piece of state inside the handle Confirm function. You can see here to simulate an asynchronous operation, we have the setTimeout of two seconds.

1:10 Basically, after two seconds, you can close the modal. If you've done things correctly, when you click the Yes, delete my account button, you should see a loading spinner here on the right for two seconds, and then the modal should close.