 Hey, welcome to day 18 We're getting close We're getting real close I'm getting this to you a little bit late today, and I really do appreciate your patience. It's been a long day for us my daughter has a They pretty rare genetic mutation called retinoblastoma and it's a tumor and cancer-causing Mutation and she's she's been out of treatment for a while, but we have Yeah, mostly mostly a while But and we have these like quarterly eye exams that we have to do just kind of check and make sure that nothing's Growing again and whatnot, and she's been good for well over a year now So we're we're very grateful, but those take a really long time. We're usually gone for I Don't know like 10 hours The the best place for us is about two and a half hours north of us So it's a pretty pretty long day for a for an eye exam, but anyway, I Was just wanted to say that to tell you where I'm at today why we're a little bit late and also You know if you're going through some health stuff. I'm totally on your side I know how debilitating that can be at times and My heart goes out to you, and I wish you the best we've been going through this for like five ish years now and You know times. It's tough, but you know, we're really pressing on and pressing in and yeah So the best to you if you if you want to talk about it. I'm here for you anytime Now into the code So today first things first it is the 18th. I keep forgetting to do that for whatever reason I'm 18th now. I want to show you something really cool. Here's the problem When we tap on these The images can load kind of slowly so that one was that was one of them and it really Effects the whole layout of the page Now this isn't something that's new to react. This is just this is the this is just the browser So we're adding this element it's making a request to get that image and that image is taking a little bit of time to get back to us react carries on and renders The rest of the data that we have and then that image will flash in once it finally loads now this kind of sucks, this is an ideal and react now gives us a really cool way of Of managing that so I wanted to show you the problem first and Now we're gonna look at the possible solutions so One thing that I'd said earlier is is that you can Suspend around anything that is that you can put wrap a promise around Now one of those things is the resolution of an image Now I'm not fully a hundred percent sure how this code works So I'm gonna copy and paste it myself But it does work and you can use it without understanding really how it works either so I think we have visited this before if we have not This is your first time great. Um, the Facebook React project has a bunch of fixtures inside of it. I spat there I'm just so excited has pictures inside of it And if you go into those fixtures, you can see different things that are Used as test cases for reactive features now if we go into unstable async and suspense We can go into this source components and in this user page component There is a Little resource let me say I can find it now. I had it. Okay. There's a little resource it starts here and There's a component that uses it So it's an image Resource, okay, anything that you can wrap a promise around you can keep it a resource And so it does kind of what we've been doing which is unstable Create react we've aliased it. So it's just create react or create resource and So it takes a source it creates a new promise and we have a resolve function. Okay, it's going to Create an image variable create a new image This is like a like a DOM image and then on load it's going to Provide a function that gets called and it resolves with the source and then that we set the image source to source Okay, again, I'm not totally sure like but I can kind of read through generally what it does Now here's the magic. We create a new component That isn't just the lowercase image tag, but our own its components. We're gonna use a an uppercase I Okay, and then we're going to take the source the alts all that stuff and and return a Regular DOM image tag, but for the source what we do is we do this resource read We're using this resource here instead of just applying the source directly everything else the same no problem Got it So I want to show you what that does now. Maybe you don't fully understand it I don't really fully understand it either, but what it does is it opts these images into Suspense so that we can Suspend the rendering of view until an image comes back. That's the that's the idea So we got this detail. I'm just going to copy and paste what we found Okay, so image resource unstable create root again We're aliasing this up here. So unstable create root as I keep saying that unstable create resource as create resource so We're gonna use that again copy and paste of the code and we're going to create this new image resource and Let's see what we get Okay, so what we need to do is we need to find our image Which is here and we're going to change that to the component version Which has the uppercase I because our our defined components need to have the uppercase letter It's going to resolve to a regular image, but using that resource. So we will save that Give ourselves a little bit more room and What you can expect to see is that as I click these it's going to show that fallback Until the image resolves what that means is that you'll never see the image coming after and disrupt the flow of the page it will wait until we have that image with the data and Present it all at the same time. Um, this is Really amazing because it makes this view very stable and I don't mind waiting that extra couple milliseconds to To have the full view we've all been on pages where it's like I mean, it's kind of a joke at this point where basically stuff comes in and then you try to click on something and then something inserts itself right there Reflows the whole page It's a disaster. So this is really awesome. It makes your pages feel a lot more stable And yeah, it's great So that's it for today. It's um, it's pretty simple I definitely suggest taking a look at this and trying to understand it as best you can Because there are a ton of places where you can do stuff like this. So like with script tags My friend jerd Palmer has a library. I think it is called the platform Let's see. Yeah, Palmer HQ slash the platform and he has Created a bunch of components that you can load in this same way So image script video audio preload Style sheet, etc. So all of those are in this package called the platform Um, I definitely suggest trying to write your own. So think of a use case that you have, you know, maybe Stripe you want to have all of that Javascript load and know that it loaded before you can present the pay with strike button or whatever There's plenty of things that you can use this for So give it a try. Maybe just try writing it on your own. I'm just the image one This is a very useful practice and I think we'll start seeing more and more of this. So Thanks for hanging in there. We only got a few days left. I know you can make it. I'll see you tomorrow