 Hey, how's it going? I'm in a different environment today. I am in my office and as you can see it's quite a bit different than my home office But I'm working a little bit late today, and I wanted to make sure that I got you out a video So here we are. I know the audio is gonna kind of suck I'm recording from this this screen and it's definitely not as good as the microphone that I have at home But it'll do So today what I want to do is I want to kind of continue the question that we brought up yesterday Which is how to nest? Suspense and I realized that in order to do that we need to talk a little bit about how to Debug certain experiences So for that I want to open up the Chrome dev tools. I am using Chrome I'm all apps or all browsers have some form of dev tools these days and It's possible That they'll be really similar to this you might have to hunt around and find Exactly where they are, but they should be very similar to what we see here now the first thing that we need to to do is kind of Make it so that we can see some of our Loading states, so we have more time to see like how the waterfall Happens where the data gets loaded and then an image gets loaded and how that Interacts with our app and what gets shown when after a certain amount of time Now in order to do that with all this caching going on We need to kind of take control over certain elements. So I've opened up the Chrome dev tools I did that with was it command option I There's other ways to open them. I couldn't tell you how but that's how I do it command option. I is how I open it And that'll open up into the last pane that you were in you saw that I was on network There's other ones that will open you up into you know elements console whatever tons of stuff in here We can do a whole course on this Now you can limit What types of things you are interested in seeing so one of the things that I'm interested right now is seeing the images Okay, so we can see that as soon as I hit it hit that an image came through right? I think that if we looked at what is it? Xhr's we would also see that the request came through for the for the data for this component So we can also see all and see that both of those came through if I hit back You'll notice that it didn't refetch the list because that's in cache Again if I hit to I see that now it's possible that if I hit one again I'm not gonna make any more requests because those are already cached Okay It might depending on it's it's questionable right but we can see that these things are brought in from the disc So from disc now I Really don't want that to happen when I'm debugging this experience of seeing What loading states the user will see in a slow connection? So I'm gonna press this button called Disable cache and that will disable the cache the browser provides now react cache is still gonna be doing its thing But this will disable the cache that the browser provides So if we tap that you can see that we loaded notes Not from disc, but actually from the network the image and the data So we'll hit back hit to you can see that now that is actually being fetched now This will give us the opportunity to see Those that that loading state now react cache cached that one the ones that we've already seen now I think I'm gonna be experimenting along with you if I hit refresh on these it will kill react cache and we'll be able to see the The the initial state again pre-cache now it's cash by react cache Okay, so we've got all that going on Now even so when I click on something that react cache doesn't have and we make the request And we make that request out Well, it's still pretty fast actually so I have a pretty fast network here at work And it's it's faster than I'd like in order to see what it might take to have like if I had a slow image So I can go here and turn on throttling I find that in a lot of cases fast 3g is enough for me to kind of get the user experience But I can throttle it down even further to slow slow 3g and you can add some custom ones as well So if I hit refresh on this it's actually gonna take a while to build up everything on this fast 3g connection But you saw right away that these loading states take a lot longer, which is good So this is This is what you need to know about how to get a kind of better Environment for debugging these without having to change things about your app Without having to change things about the kind of test network that you're working on You can just do that all here and simulate it So one thing that I had posed yesterday was the idea that you can nest suspense I'm gonna try and get this out of the way. We don't have a whole lot of screen real estate and I have let's see So this so we're rendering our Pokemon detail And that has a suspense component around it that will render the fallback if it's been more than a second it looks like So Yeah So we're gonna go Back here, and we're gonna go find that Pokemon detail component and what I want to do is I want to Say if I unless changes to slow 3g and let's see how that that should really Bug us down Okay. Now if I'm just waiting for the image, but the data came back I'd like to put a placeholder right here that would help the that would help the experience in these really elongated times and keep instead of just wondering what's happening So we can do that we can nest suspense So this this beat is already rendered inside of suspense, but we can nest it even further. So we can say react suspense Wrap this image in react suspense Now this is suspense inside of suspense What that gives us is the opportunity to render a fallback. So, um, right now, let's just take the easy way out and Say image loading Ideally we would put some kind of placeholder image here Now if we click on this, we won't see anything right away because we haven't told it that we want the duration for this to be less Then the suspense around it So we can set a max duration just for this image And say, you know in the minimum case Say zero. So this will always show Right away no matter what like that Okay, see image loading. So it takes a second, but it gives you that fallback now That's different from what we just saw which was it was waiting for both pieces of the puzzle before Before rendering the whole view and that's what we wanted in that fast case where we saw that the user in in like less than 250 milliseconds We don't want them to have to wait and then see everything kind of jerk around the page, right? But in this long case where they're waiting for a significant amount of time for data to load It can be really nice to see these these fallbacks as the page loads Now this should probably be something a little bit more reasonable. So maybe 250 milliseconds and so save that and Tap this you'll see that it'll wait for 250 milliseconds But the image still hasn't loaded yet. It provides that fallback and then when the image loads it loads Now what we can do is we can take this off We can put this back to just regular online and With our fast internet connection Reload this We should see that In the ideal case with the fast internet We don't see that fallback and it just kind of loads everything loads really quickly and everything falls into place So now maybe we are still seeing that a little bit So maybe we need to set our threshold just a little bit higher to something like 500 milliseconds like really if it's taking a long time and That seems to be about our Spot, um, I guess just one more time. I'm gonna take it down to slow Hit weedle Let me see that fallback again. So that's it. That's how you can use the dev tools to Man, it really does not want me to grab this this thing. It keeps wanting to grab that That's how you can use the dev tools to really control your environment to see what's loading from the browser cache What's being fetched? Disabling the cache and then also setting up a slow thing so you can see An emulation of what those slow networks might feel like So that's it. That's our lesson for today. Um tweak around with those browser tools I think they're gonna be really helpful for you as you continue to develop as a react developer I'll see you tomorrow. Hopefully in my house with some better sound