00:00 So, right now, our app doesn't have any pending UI and you can notice that by clicking on something and then like nothing happens for a couple hundred milliseconds. It's not the best user experience and if you want to, you could go into our database API endpoint and add an arbitrary delay just to kind of see how bad it actually can get.

00:19 But we definitely want to have some sort of pending state. We want to do similar things to what we've done before with spin delay and all that awesome stuff. So, that's what you're going to be doing in this exercise. One of the utilities you're going to want is parse location state. So you pass this, whatever the current location is, and it's going to give you an object.

00:38 And then you can use that to determine what is changing. So, if the search is changing, then you can give this a pending state. If the ship ID is changing, you can give this a pending state. There are a couple of interesting things to make all this work. For us to be able to compare the previous location to the next location, we need to

00:58 be able to parse both of those and compare. And so, we need to have some mechanism for saying, okay, what's the next location? Where am I going and where am I now? And so, we're going to actually use deferred value for that. So, instead of storing the location in state, we're going to store the next location in

01:15 state and then use deferred value to determine the current location. So, when there's no transitions, those two will be the same. But when we're transitioning, we'll set the next location to be whatever destination we're going to. And the previous location will stay as the location value that we have in state from

01:34 use deferred value. And so, during that transitional period, those two will be the same or they'll be different where our location is going to be a little delayed from our next location. This is one of the main use cases of use deferred value is that delayed ability during

01:50 a transition like this one while still keeping everything responsive and able to update state and things. So, that is going to be cool. You're going to be using use deferred value. You're also going to be updating a couple of places to add some client components because pending UI is a client thing.

02:10 We need to be able to update state, manage that state based on the pending UI. So, you're going to be refactoring a couple of things in a few places. It's going to be pretty cool. We don't have like a really complicated pending UI. We want to keep it simple. So, just like opacity 0.6 if we're pending in these places. But it should make it really clear when we're pending.

02:29 And then, of course, spin delay for avoiding flashes of loading state and all of that stuff. Do feel free to dive into our db-ships.api to set a delay of something like 4,000 milliseconds

02:45 on the search ships or something so you can see what the pending UI looks like as you're typing. As it is now, if I say GA, then we're just waiting for four seconds. We don't have any pending UI until finally the UI changes. Oh, and the other thing we're going to want to do to just get a is pending state is using

03:05 use transition. So, you'll have like use transition will help us know are we pending at all. And then use deferred value will help us know what is pending, what is the thing that's changing. So, that should be enough to get you going. So, let's get going.