00:00 Okay, let's come down to our ship details where this image is rendered. There it is right there. And we want to change this to an image component. So capital I for image component will come down here to create that component. So we're just going to wrap a regular image tag.

00:17 So I'll have function image, and this is going to take all of the props from like that you typically pass to a regular image and then forward them along. Instead of using this though, we're going to say component props and pass image. There we go. That's the type.

00:34 Okay, so then we're going to pluck off the source so we can access that. And we're going to call image source with that source and that this is going to need to be passed inside of use. So this is going to be used there. And I'm going to just say source equals use. There we go. Source. Tada.

00:54 Okay, great. So with that now adding use here, we just need this to return a promise. And then use will trigger suspense for this image. We're suspending. And then that transition that's happening will stay happening until all the components that need to be rendered are finished suspending.

01:13 So let's create this image source utility. It's in our utils directory. And we've got this utility for preloading the image. So now we just need to make a image source function. But we do need to have a cache for this, remember, because we don't want to be creating these

01:32 promises on every render. We need to cache them. So let's create our cache first. It's just going to be a string, which will be our source for our image, and then the promise that resolves to a string, which would be, again, the source for our image.

01:46 So with that, then, we can export a function called image source. Yep, all of that stuff looks pretty good. So here's the thing that does the async thing. And here's the mechanism whereby we avoid doing that async thing if we've already done it before.

02:06 And then we get that image promise. We update the cache to have that promise, and then we return the promise. And that should actually do it for us if we import this from our utils. And our source here, it looks like it could be undefined. So why don't we, let's see, I guess we could just default this to an empty string.

02:26 I don't know why anybody would want to have the source be anything but a string, but I guess that type is coming from the React component. So yeah, we'll just do an empty string if you don't provide a source. Okay, let's see if it works.

02:42 So open up our DevTools, hard reload with an empty cache, and then we'll change to a slow 3G so we can see what's happening. And then interceptor. All right, boom, boom, boom, boom. That request finished, but we're not showing the data yet. And now we're waiting for the image to load, and boom, it all comes in together. That's exactly what the objective was.

03:01 Maybe not the best experience to have to wait for the whole thing. We'll get to that in a second. But because this image suspended during that transition, transitional period, it took hold of the transition, and the transition didn't end until all components were done suspending. And that includes our image.

03:21 So again, you do not have to just be loading data with a fetch API or something. You can do any asynchronous thing and suspend on that, which I think is pretty legit. There you go.