00:00 So there aren't actually a whole lot of changes we need to make for this optimization. We're going to just remove the import and then we're going to say our globe equals a lazy call from react and here's our dynamic import for globe

00:16 and now we have a suspenseful globe. If we render just the globe as it is without wrapping it in suspense then we'll have kind of an interesting experience here. Wow that happened really fast here. We're going to have to throttle our network here a little bit

00:32 so slow 3g clear all this out also maybe disable the cache here and then slow and we don't have any there's not actually an indication of what the problem is here but if we had some other

00:47 interaction that was going on here or whatever then it actually this wouldn't yeah see you'll notice we're not like checking and unchecking the box here and that's because the way that suspense works is it's just going to preserve the the previous state and so for for the app

01:03 i don't because we have no suspense boundary at the top so what we're going to do is stick a suspense boundary around here so that we have something specific to show and give the user some feedback that hey yeah we're loading something just chill so we'll say our fallback

01:19 is loading and you could probably come up with a nicer fallback that maybe make it look like a loading globe but i'm going to switch this to no throttling here really quick save that there we go and refresh and we'll go to a slow 3g again and watch this it's loading all of our globe

01:39 and all the whatever other modules it needs to load for this we get our loading state right there this checkbox is checked and so we're not suspending the entire app but we're just suspending the part that is trying to render the globe and boom once it loads then it's able to

01:55 execute so let's take a look at the impact of our loading might be useful for me to i'm going to start up the app for the the problem so before we finished and we can compare the problem and

02:11 the solution so if i do a hard reload here then we're going to see we're loading two megabytes transferred you got to keep in mind that this is not optimized it's not the production build of our application or anything so there's it's not minified all of that stuff so you keep that

02:30 in mind but we're comparing apples to apples here because we're not going to do the optimized version of our actual app as well so yeah about two megabytes of data there for that initial load and then if i do a hard reload on this one it's 1.4 megabytes still a ton but again it's not

02:46 optimized yet so it should be a lot less but the fact is that we're saving ourselves on 0.6 megabytes by not loading the globe up front and if we take a look at our coverage coverage and reload here

03:00 and then compare that to our coverage right here then you'll see we are because we're loading the gesture and that's 89 we're loading geo d3 geo and that's 87 and reacts being that's 79 all of that adds up now we take a look over here and we're not loading any of those things we still

03:19 have a lot of react dom we're not using yet and i've still got my chrome extensions in here and all that nonsense but we because we're not even bothering to load all of this extra stuff we're not on we don't have as many unused bytes now of course if i show the globe over here now we're

03:34 going to improve those numbers quite a bit and that's great but i i think it is worth a discussion about the trade-offs of actually am i okay having a loading state so that i only bring in the code as needed and i can have those coverage numbers you know bumped up once i load that code because

03:53 i'm going to execute it immediately and we can address some of those trade-offs as well the other thing as usual just for fun if you want to play around with the location of the suspense boundary here is and observe what the user experience is like for that i'll slow this down and we go show

04:13 globe and now poof the whole thing is is gone so that is another thing to keep in mind is like the location of your suspense boundary as always just like error boundaries but yeah so for this particular thing i think putting it right next to the globe itself it's probably the best place

04:30 okay great so code splitting lazy dynamic import now we ran to the globe and we got our suspense boundary awesome