 Hi, welcome to day 14 It's gonna be good. So today I just want to continue our discussion about what concurrent mode enables for suspense now yesterday We were able to enable concurrent mode by oh, I'm in the wrong Wrong file here. We were able to enable concurrent mode by doing this Changed our rendering to use create root and set up a root and then render our application to it So that was what enabled that now our whole app is using concurrent mode What we were able to do then is use this max duration, which as I said in default mode whoops In default mode just sets everything to zero. So everything is max duration zero So you automatically see your loaders and and or fallbacks, sorry Now with concurrent mode, we're able to set these two values that we want and really fine-tune the user experience So let's say 300 milliseconds is our threshold to where a user might not even realize that data should be loading yet that if we can get in under that then we can We don't have to show a spinner, but if it takes any longer than that then yeah show the show the loading state Now the thing with this now is we only have one suspense component So we've wrapped all of our application into that suspense However, we are actually fetching two endpoints. So we have the Pokemon detail and then also the the Pokemon list and if I change one of these We could get into situations where that whole chunk of UI Then has to is subject to this one suspense component So as it's fetching the the the Pokemon detail It's going to disappear and then come back Now that's not ideal since that little list doesn't have to reload It'd be nice to have that controlled in its own suspense component so that they are Indifferent to one another so I will at first you've already been able to see this this issue You hear play out so what I'm going to do is I'm going to solve that simply by wrapping putting separating the suspense components Okay, so that should do it so now I have a suspense component around the Pokemon detail and a suspense component around the Pokemon list so as I navigate through these We see now the spinner for the loading state just for the Pokemon So as we do these we get that okay cool That's exactly what we wanted now I'd like to see how that plays out when we have one request that's dramatically slower than the other And so we'll do we'll set these up again. I have this sleep promise package set up which allows me to chain a then on and Kind of sleep the resolution of this for a set period of milliseconds I'm gonna set this one to seven actually no I'll set this one to fifteen hundred milliseconds, and I'll set this one to the list to be 750 So the individual Pokemon should take twice as long as the the list Let's reload that and see how it goes Okay, so it shows both loading and then the list resolves and the Pokemon resolves So then we can do that takes another 15 or 1500 milliseconds for each one of these But we see that our list stays in place So yeah, so let's run that again So you see both states cool perfect. No this state is kind of no longer valid valid I don't want to see that list fall back anymore. I probably just want to see like see finding your Pokemon Or something some other message, right? It doesn't really matter, but now we can see that that message is a little bit more Interesting. So yeah, that's it for today. There's not really anything else to say But that if you want to you can separate out its suspense and have really fine-grained control over Kind of what things load in tandem and what can load separately? So now you can see this list can just stay there We have that there all the time and then it can persist while we Kind of fetch that other data and also you can see that anything that we Have already clicked on if we click on it again with react cache. That's already cached for us We get it immediately. We don't have to wait. I hope that's helpful If you have any questions, let me know because it's a Friday. This is gonna be the last The last email of the week. So if you came here from an email, I'm gonna do two more videos I think unless you have any questions, feel free to hit me up with some questions But I'm mostly I'm gonna be styling the Pokemon element since I haven't done that yet. I like to start introducing Introducing some some more character to this app So if you want to follow along and watch how I bring in some more of that data, maybe style that a little bit You're more than welcome to I'll be producing a video on Saturday and Sunday So I hope to see you then emails start up again on Monday, so subscribe if you like join the email list and I'll see you tomorrow or Monday