Kent C. Dodds: 0:00 For this one, I'm going to show you a little example, if you go to source examples, pre-loaded image, and pull that up, you'll see that show images, preload Bulbasaur and Ditto. If you click on show images, then it'll pop up both of those.

0:12 You actually won't notice the real problem here unless you pull up your Network tab, and you click on the Reload button with a right click. With the Network tab open, you should be able to empty cache and a hard reload. We'll go ahead and do that.

0:27 That's going to just come to our website as if it's the first time we've ever been here. Then I'm going to click on preload Ditto. Actually, first, I'm going to slow down to 3G, and then I'll click on preload Ditto.

0:38 This is going to simulate, "I'm a new user to your website. I'm on a slow network connection." If we preload Ditto, then we're going to see that we get Ditto's image already starting to preload. It took 2.2 seconds here to load.

0:51 Now, if I click on show images, you'll notice Ditto shows up right away and Bulbasaur takes 2.76 seconds to load. If we go ahead and refresh, this is going to take a second because again, I'm on a slow 3G connection.

1:07 You'll notice this time, I don't need to worry about preloading either one. They're both going to load really fast, and it'll say that this came from a memory cache. That's because both of these have a cache header set to public with a max-age that's really big.

1:25 That works out really nicely because we know that these images probably won't change for a really long time. There's no reason for the browser to go and request those images again because they aren't going to change anyway.

1:37 Why don't you just save it to disk in the browser, and then the browser can just go ahead and load that up right away. That's a built-in cache mechanism that the browser has. We want to leverage this same cache because we have a bit of a problem.

1:51 Here, if I do this same slow network connection here, we'll slow this down to slow 3G, and then I click on Pikachu -- I mean just move that out of the way -- then you'll notice Pikachu's info shows up here. We're still waiting for Pikachu to show up. We didn't even see that loading spinner image.

2:12 That loading fallback Pokémon thing, that didn't even show up because it took so long to load. That loaded our data faster. It'd be nice if we could preload this. There are two ways that we can do this.

2:24 We can either do it the same way we did with this preload image for both of these with JavaScript where we create an <img> element, set its source to the URL for that image, and then that gets it preloaded into the cache. That works out pretty well.

2:39 Or we can go through our index.html because we know that we want that image loaded for the entire app.

2:46 I'm going to go ahead and say, "Link rel='preload'." We'll say, "Href." Then our image for this fallback is right here in the image directory, pokemon/ fallbackpokemon. We'll follow the template that we have in here with the public URL, and then image pokemon/fallbackpokemon.jpg. This is going to preload it as an image.

3:14 With that now, I can come over here. Let's turn it back to online because I don't want to wait that long. Let's do a hard reload. It'll reload the app. You'll notice there it is right there. It's loaded that fallback Pokémon image.

3:27 Now, if I go to a slow 3G connection, we move this down a little bit, we go to Pikachu, then we have that image loading right away right from the get-go. I did that for you, but your task is to make sure that we load these images of each of these Pokémon before we show the data because as you observed, Pikachu image didn't show up before the data showed up. It looked weird.

3:50 If we go to Charizard, Charizard's data is going to show up, but Pikachu's going to hang out until Charizard's image finishes loading. Same thing with Mew. Mew's data shows up and then Mew's image later loads in.

4:03 Not a super great experience, and that is what you're going to be solving in this exercise, is you want to wait until not only the data but also the image has loaded before you show anything.

4:14 Then we also have some extra credits in here for you to play around with to avoid the waterfall and start making that request for the Pokémon image. At the same time, you make the request for the data, so you don't have any issues there. Then we're going to see that this is basically Render-as-You-Fetch and how that makes the whole user experience much better.

4:35 Have a good time with this, and we'll see you on the other side of the exercise.