Alright, with that out of the way, I wanna now implement the pending UI. So let's go add a little sleep function in the backend so we can see what's happening while the form is processing. And speaking of processing, we are going to use Inertia's, useForm processing helper to handle the spending states. Before we do anything, let's go to sleep for one second and let's make it two seconds. So the result of that before we add the pending UI is, well, let's see, I'm going

So the result of that before we add the pending UI is, well, let's see, I'm going to create the puppy and nothing happens for two seconds before the puppy is created. If you have a really astute eye, you may have noticed a little progress bar at the top of the page. That Inertia adds to the application shell, but that's not enough. Let's implement the actual pending state on the forms button.

but that's not enough. Let's implement the actual pending state on the form button where the user's attention probably is. Alright to the new public form we go. So remember how we had the form element and then we have the submit button here that is detached because we want to use the useFormStatus. So forget all of this, I'm going to grab the button here and place it in layer of the submit button. Obviously we don't have the pending stuff so it's going

and place it in layer of the submit button. Obviously we don't have the pending stuff so it's going to break things, but we'll fix them. Let me delete that whole function here. And so now we need to fix the status of things that do not exist. And like I mentioned, we are going to use what we've already used in the past, the processing helper from Inertia's useForm hook. And that basically can replace the use

processing helper from Inertia's useForm hook. And that basically can replace the use of the status we obtained from React form status. We checked for status pending for disabled, and we can just replace that with processing. Alright, and next we check if we are pending. Once again, we can replace that with processing. And here you can see that the status lets you access the data of the form that's being submitted and then we get the name.

data of the form that's being submitted and then we get the name. But here we can do that much easier because we have, remember the data values here. So if I want to grab the name, which is what I was doing here, I can replace that with data.name. And so I believe we have reimplemented the pending UI here while the form is processing, we disabled the button and

And so I believe we have reimplemented the pending UI here while the form is processing, we disabled the button and because they are disabled styles here, it's going to change color. And then the button text itself, it's going to say adding Simon or adding Tony or Wolfie or whatever. If it's processing. Otherwise it just says add Puppy. Let's go try it out. And I have a really good feeling about this. We are going to create Jumpy.

And I have a really good feeling about this. We are going to create jumpy leaps up and down. And the photo surprise surprise is going to be Braves hoodie as I submit. Remember we have a 2 second sleep. That button should turn gray, say adding jumpy. And then when it's created, it's gonna scroll to the top with a nice scroll margin of level 6. This should be a delight.

with a nice scroll margin of level six. This should be a delight. Let's go adding jumpy and scroll to the top. Ta-da. Let's like jumpy. And just like this, our implementation of the new puppy form is now complete. I hope you enjoyed this one. I will see you in the next video Pace.