00:00 So, we no longer want to await this get ship because this is what's stopping us from being able to get down to the bottom where we actually end up rendering stuff, right? So, we want to actually render things right from the get-go. So, we're going to remove this await right there. Of course, this is going to not work out nicely for our components here because this is going

00:18 to say, hey, I kind of, I'm a promise. I know what I resolved to, TypeScript is saying, but yeah, I'm not that thing yet. So, we're going to rename this to ship promise, promise, there we go.

00:31 And then we're going to create a variable for the ship and let's add a dot then on this get ship that will assign the resolved value of get ship to our ship promise.

00:46 We'll grab that ship type from our utils and I think we've taken care of all of those things. So now, if we save this, then things blow up, of course, because we're not actually using the ship promise.

00:59 We haven't told React, hey, when this thing resolves, I want you to give me the details or give me the resolved value or anything. And again, we're not using the use hook yet, we're kind of building that right now.

01:14 And so, all we have to do here is we say, if there's no ship, then throw the ship promise. We're saying, hey, React, here's the promise that you can hang on to. Again, this is kind of an implementation detail of React, the React team may not even like me teaching you this, I don't care.

01:30 I think that it's really instructive for you to see how the things work on the inside, so we're going to do that. So, we're throwing the ship promise, React is going to catch that and then it will handle it appropriately. So, if we save that, we're still not going to get what we want initially because we haven't configured the pending state.

01:49 So, while it does technically work, we're just right back where we started as far as the user experience is concerned, which is the only thing that matters. So, we've got our, if there's no ship, then throw the promise. And once that resolves, then React is like, oh, you resolved, great, so I'll re-render you.

02:07 And the second time it renders, now the ship has been defined because we set that up. So, if we want to add some pending UI, then we're going to come down here. We already have this ship fallback, which is kind of handy dandy. We need to wrap the component that is suspending in a suspense boundary. So, let's look at where ship details is right here.

02:25 We're going to add our suspense component and have the ship fallback be our fallback for the suspense component. So, we'll say suspense, bring that in from React. Here's our fallback and we'll wrap that up here. And now, ooh, look at that, fancy. Yeah, that's pretty cool.

02:44 So, for that time period, we at least have something to show the user. Now, this all works because we removed the await, meaning that we could run to completion right here and get this rendered right away. And then, as React is going through, it's saying, okay, let's render this stuff. That's a div. That's another div. Great div with class name, details, whatever.

03:03 And oh, here's a suspense boundary, I'll put that, you know, log that away. And here's ship details. Now, let me go call ship details. And then our code says, oh, there is no ship yet. We may have started this promise earlier. We did. So, the promise is already in flight, but we haven't assigned the ship yet. So, let's throw the ship promise and React's like, whoa, whoa, whoa, okay, okay, that's

03:23 cool. I know how to deal with this. You are trying to suspend the ship details. So, I'll grab that promise. I'll hang on to it. I'm going to attach my own then handler to it so I can hang on to some information about that promise. And then, once that promise resolves, then React is like, great, the promise is resolved now.

03:41 So, we can now render the ship details. And because we assigned the ship to the resolved value, we don't fall into this if consequence anymore. And we continue to actually render stuff. And that's how all that works. And in the meantime, of course, the suspense fallback gets rendered instead. I think that's pretty cool.

04:00 And you should feel pretty cool for building this. Good job.