00:37 So let's add in our root TSX where we have our HTML elements here. Let's add scripts. This is gonna come from remix-run-react. So we're gonna import that. And with that now, once we refresh, we should be able to navigate between these. And you'll notice the favicon is no longer refreshing,
00:56 that's because we're no longer doing full page refreshes and we can easily navigate between all of these pages. So that's cool that we added that, but we actually also made the experience a little bit worse. Actually, first, let me say we did make the experience better. You'll notice now we're just loading in the data right here. This is just JSON.
02:11 We're able to just load the pieces of our application that are necessary for the routes that we're on. That's all code split happening automatically for us by Remix. But the one thing that is maybe not better than full page refreshes is the pending UI. It's not great at all. And we'll get into this in a future step here,
02:30 but I just wanna demonstrate. If I go to a slow 3G network and then I click on this, we're not getting any UI feedback. The favicon isn't spinning. We're not really, there's nothing in the UI showing that, hey, we're loading. We care about you. We see you, right?
02:48 So we could do a better job of that. Like when we delete, there's nothing. And so the user's like, well, let me just delete, delete, delete, delete. They keep on clicking delete and it's go over and over again because it's taking forever and we're not getting any feedback. That's not a great user experience. And then finally, when we give them a chance to finish that request,
03:28 like slow networks. Now, I know that not everybody's using 3G anymore. In fact, very few people are using 3G these days, but lots of people, pretty much everybody, has poor connectivity sometimes. And so you want to think about those use cases and those users. And there are plenty of people
04:06 but that's gonna be there to keep our iframe in sync with the URL and everything as part of the KCD workshop app. So you won't ever actually use that in a real app, but you'll see it in this app. And so that's why I wanted to show you that piece here. And then the live reload is for hot module replacement.
04:25 If you're familiar with that, it just allows us to hot swap different modules as you're making changes to those things. So you don't have to lose all of the state, even though we're not doing necessarily a full page refresh, we're also not eliminating all of the state. This also applies to when you change a loader or an action.
05:03 Really, it's a long video, long explanation, but really the solution is very simple, just to add scripts to the page. And now all of the code split bundles and everything will be loaded on demand. And the loaders will be loaded as fetch requests rather than full page refreshes as you're navigating around.