00:00 If we take a look at where search ships is used, then we'll find it right in here in our search results. If we look at where search results is used, we'll find that in our app.js right here. We need to wrap this in a suspense boundary, and we also want to do the same for our ship details.

00:17 We already have some UI written for us for the fallbacks, so we'll just grab those. You can feel free to dive into the implementation of those. It's just typical React components. Then we want to wrap the search results and the ship details in suspense boundaries. This is where we pull out our old create

00:36 element chops for how this is all supposed to be formatted. But this is now going to be the children of our suspense boundaries. I'm going to cut this. We're going to say H, so that's hyperscript, create element. This will be search results, or actually no, we want a suspense boundary from React. The fallback will be search results,

00:55 and then we've got our search results. Is that right? I'll paste over that. Yeah, that's exactly what I had in my clipboard. Man, AI assistants are pretty awesome. That's now wrapped in a suspense boundary, and we want to do the same for this. Another suspense boundary for this, H, suspense, our fallback will be the ship fallback, and then yeah, we've got our ship details with the ship ID.

01:14 Amazing. Okay, great. Of course, we need that question mark back. Awesome. With that in place, first, I want to take a look at the RSC endpoint. If I hit refresh on this, whoa, that's interesting. Did you see how that loaded in? We actually had four different chunks.

01:32 Watch it closely. One, two. No, I thought I saw a different set. Okay, maybe it was just three. We've got the initial chunk that has our full page suspense boundary, then the next chunk that has our ship details, and then the final chunk that has the search results. What's really cool is that this can actually change.

01:52 I'm not going to show you the UI yet. Let's just change this. What if I move this delay down to get ship? Now, the search results are fast, get ship is going to be slow. Well, this is going to stream in a different order now. We get all of our fallbacks and we get our search results, and then right here, we're going to get our ship details.

02:11 This is so cool that partially as a result of this format, we can stream in any order that we want to, and React will just make sure that we swap the UI with the right thing, which is pretty cool. Now, this actually is not the reason for the format.

02:30 You could actually make regular HTML work this way if you wanted to. The use client stuff that we're going to get to later is why this format needs to be the way that it is, but I think that is really cool. I'm going to move this back up here, and let's take a look at the UI that we've got here. Refresh, we get that suspense boundary there,

02:50 the details load in, we got our boundary right here. Then if we switch it back, now you'll see suspense boundary, then the loading state, and now this has got a loading state, and then it finally resolves with all of the data. Wow, that is cool. Then of course,

03:06 with no delay other than like our arbitrary random delay, then we can take a look at how that experience looks, pretty reasonable experience. Of course, if you're really concerned about the loading performance of your application, you would server render this,

03:25 so you wouldn't even get this initial loading state. It would just initialize with these individual loading pieces, and you can restructure your suspense boundaries however you like to get the loading user experience that you're looking for, which I think is really awesome that React has that power. Very cool.