00:00 To get the behavior we're looking for, we need to add a suspense boundary around this. So suspense, and our fallback is going to be image with the prompts, but we'll override the source to be image fallback ship. And then we'll wrap our suspense right here.

00:16 But by doing that, we aren't going to get the desired behavior because this image suspending is going to be part of the parent transition. And so even if it is a slow 3G here, and actually here, let's speed it up so we can do a full page refresh with empty cache. We don't want the image in our cache here.

00:35 And then slow 3G, we do the interceptor. And you'll notice it's not doing anything for us. Yep, we're loading the image. It's not showing the suspense boundary because we're already part of a transition. So it's not going to include that. But if our suspense boundary is new, like if we put a key prop here or on one of its parents,

00:55 we're going to do that here. So we'll say props.source. When that source URL changes, then it's going to remove the error boundary and all of its children, including our suspense boundary, put a completely new instance in and React will be like, oh, this one's new. Let's show the suspense boundary for this one. And that will fix our problem.

01:13 So let's do a empty cache hard reload. And let's throttle down to slow 3G. And we'll watch. Interceptor loading data. Data is loaded. And now we're showing the fallback image, which we preloaded when we initially landed on the page. So that one's already in our cache. And we don't need to worry about suspending that or anything like that. And there we go. We have the experience we were looking for.

01:35 Now, you may disagree. You might think that the previous experience was better or whatever. But I like this experience and our users like it too. And now you know how to trigger a suspense fallback, even if we're in the middle of a transition, by simply adding a key to have React be like, oh, let's rip that thing out, throw it away, put a new one in.

01:56 And that is how we manage this particular use case.