00:00 I need to explain something to you really quick. This is going to be a little bit of a mind bend, but trust me, the experience is going to be better. So let's take a look at something I've been kind of ignoring so far, and that is when I am on a slow 3G network,

00:15 I hit interceptor, our data loads like pretty quick, and we could display that data right now, but we're waiting for the image, and that stinks. We have a waterfall right here. I don't like waterfalls, but we have to go get the ship before we can render the user's image, so that stinks. Well, we actually don't entirely,

00:35 and we'll talk about that when we get into optimization, but the fact is we get the ship, then we get the image, and we have to wait for the image to load before we can render all of this data, even though we have the data right away. What I think would be better is if let's do a hard reload over here, and then slow it down

00:55 to a slow 3G. I want to do what this does, which is it gets the data, and as soon as the data is ready, it's going to show that, and then it just shows a fallback for this while this runs. So we need to take this whole thing, which is a suspense boundary, and then nest a suspense boundary inside of that just for the image

01:14 so that the data can show up, but this is its own separate suspense boundary. Now, you might think, oh, that's easy. We just put a suspense boundary around our image components right next to our error boundary, and everything's happy, and we're good. Unfortunately, it's not quite that simple, because when we start this transition,

01:32 and React starts, it renders things, and then it's like, oh, you're going to load your ship data. Let me suspend. The suspending period, or that transition, doesn't end until all of the things that are suspending are finished suspending. And even if you've got a suspense boundary

01:51 inside of one of those components that's suspending, it's like, oh, this is part of that original transition, so we're just going to leave that transition in place. We're not going to update the UI to include that fallback. So this is a problem, because it kind of goes against what we're trying to accomplish here. I think it's the right default, but it does mean that we have to do something

02:09 a little bit special to get the behavior that we're looking for. So one thing that you'll notice is that as we're navigating across these different items, we end up showing a pending state here. Let's actually do another hard reload here,

02:28 and I'll slow it down. And you'll notice now we have this faded state, and we have this faded state. But when we hit the page for the first time, we have this completely different pending state. Yeah, it looks like this, right? And that was by design.

02:47 We added the use transition and everything, and so we wanted to have that behavior. But on the initial render of a suspense boundary, it is going to render the fallback. React will render the fallback. This is the initial render of this suspense boundary. This suspense boundary didn't exist before, and so we're going to render its fallback, just period.

03:06 But after it's already there, then it's considered to being part of any transitions that are going on, and so that's why we don't render the fallback instead. So here's the trick. What you do to get a suspense boundary to be separated from the parent transition

03:25 is by adding a key prop to that suspense boundary or to one of its parents. So adding a key that will say, hey, take this chunk. If the key changes, throw all that away. Bring in a new one, and it could be all the same UI and everything, but bring in a new one. And now this is a new instance of all of that stuff.

03:44 And because it's a new instance of that stuff, it's not going to be part of the parent transition anymore. It's brand new stuff, and so it will show the fallback. So there you go. That's the idea of how all of this is working. So because it's a new instance, it's almost as if we're rendering it for the first time, so we're going to show the fallback. It's not going to be part of the transition. And that's how we accomplish what we want.

04:03 So the amount of code that you're actually going to change in this step of the exercise is pretty small, like extremely small. You're going to add a suspense boundary, and then you're going to add a key prop to the suspense boundary or one of its parents. In our case, we're going to do the parent. But the implication is pretty large,

04:20 because it allows us to separate this particular suspense boundary from any other transitions that are going on, because we're just like, nope, I want this one to be a separate thing. And ultimately, the entire goal is just for a better user experience. There you go. So not a lot of code changes. Have a good time with this.

04:39 I'll see you when you finish.