00:00 By making things wait on the image before we show anything and suspending on that image, if there's a problem loading that image for some reason, one reason or another, then our error boundary, our nearest error boundary is going to be rendered. This is interesting because it means that if there's a problem loading the image, we're not going to get any of the data either,

00:19 which probably not the best user experience. What users are used to is if there's a problem loading an image, then they'll at least see the data, they just will see this little thing with the alt text showing up and it's not a great experience, but at least it's better than not seeing any of the data. That is what your job is here,

00:37 is we're going to leverage the fact that error boundaries can be local and nested and everything. We're going to put an error boundary right around the image, so that way we can do whatever we want to with our fallback. Now, the interesting thing here is that maybe you could have a special image that you display as a fallback,

00:55 for if there's a problem with this image. That would be fine, but what we're going to do is actually our fallback will just be the regular image tag for this particular image. That way, what ends up being rendered is a regular image tag, and so if it fails again when it's rendering the fallback,

01:14 then it's fine because users are used to this happening. It's also pretty unlikely to happen anyway, but then if for some reason it failed when we were doing the suspense boundary, and like all of the pre-loading and everything, but then it somehow worked with the regular image, then eventually it'll show up,

01:33 so win-win, but you should talk to your designer or product owner on what they want to have happen if the image fails to load because I'll bet you that this is not it. Let's do that.