00:00 So here's what we're going to do. I'm going to come down to the ship details, and the first thing I'm going to do is accept the optimistic ship. We need to have a optimistic ship be displayed when it's available. So we'll accept this optimistic ship. Optimistic ship, that's going to be a ship which will bring that type from our utils.

00:19 With that then, we can say, hey, if I have an optimistic ship, then let's show that one instead. Otherwise, if there's no optimistic ship, then yeah, sure, go ahead and suspend with this ship. Great. So then we come up here and we're going to pass the optimistic ship.

00:36 Now, the optimistic ship could actually be null potentially when we don't have an optimistic ship. So let's come down here. This could be a ship or null. There we go. Now, with that, we're going to actually create a optimistic ship with useOptimistic.

00:54 So optimistic ship here, we'll just copy this, stick that there. That optimistic ship is going to come from useOptimistic. Optimistic ship and setOptimisticShip. Now, with useState AI Assistant, we're going to be using useOptimistic instead.

01:12 Now, that's going to come from React. Yes, it's going to be either a ship or it's going to be null. We'll initialize it to null because we're not currently creating a ship. Now, we're passing the optimistic ship where it needs to go. We need to pass this mechanism for updating the optimistic ship down to our create form.

01:31 So let's do that here. Then we need to add that here to our types. So setOptimisticShip, you can either set it to null or the ship. With that then, inside of our form, our create form where we've got

01:51 all the different things that you can submit, we're going to call setOptimisticShip with a ship that is generated based on the form data that's being submitted. So we have this createOptimisticShip function that takes

02:10 the form data and it's going to create a ship-like thing. Now, it's going to miss some things like fetched out. It doesn't know when that's going to be fetched. We could say date.now, but that's a lie to the user. So we're just going to help the user know, this isn't actually created yet. We're still waiting on that. But yeah, everything else, we've got the name and the top speed

02:30 and the image even we can read that from the file data to URL. So that's pretty cool. We don't support adding weapons yet. You could add that if you want to for fun. But yeah, we're going to use this createOptimisticShip to make

02:45 our ship and we're going to setOptimisticShip with that. This is asynchronous because reading the file is asynchronous, but it's very fast, so we don't need to worry about that being a problem for us. Okay, great. So we're going to create the optimistic ship, set that to our optimistic ship,

03:07 and that's it. Actually, we're done. Okay, so let's create our ship. This is the mining vessel, top speed of three, and here's our cool mining ship. We hit create, and boom, it's right there. You'll see the dot, dot, dot right there. So it's not totally done, and now it's done.

03:25 What's cool is the way that we built this means that it looks exactly the way it's going to look when it all is finished, or as close as possible so that when it is finished, we don't have everything bumping around or anything like that. You just use the same components and just pass the optimistic version of that component, and it works out super nice.

03:44 So let's just review because there's a lot of moving around in here. So the most important thing here is that we're using use optimistic so that we can make state changes during a transition. We can either be a ship or we can be null. We default to null. If we're not actively creating a ship, then it's going to be null.

04:02 That gives us the optimistic ship and set optimistic ship. Then we pass the set optimistic ship down to our create form, and in our form action, we call set optimistic ship. So we're in a transition right now because we're in a form action. We set optimistic ship, so that's going to update our UI right away,

04:21 not waiting for the transition to end. We create the optimistic ship out of the form data. So whatever thing that the user is creating, you're going to have to create a fake version of that thing with the data that they provide. Of course, they don't always provide everything, so we've got to fake out some of that stuff in some way. You might even add a property to your fake version that's

04:41 pending or something like that so that your UI can be like, oh, this is a pending version, let me display this special thing or whatever. But with that then, that's going to be fed into our ship details, which takes that optimistic ship, and it's going to use that as the ship it uses instead of

04:59 the ship that it's suspending for while it's waiting for that suspending ship, the new one we just created, while it's waiting for that to finish loading. That is your optimistic UI with the use optimistic hook.