00:00 So instead of trying to move stuff out, this will actually be easier if we just call this document. And then we can have a new thing, export function app. And this is our new app component. And then we just move stuff into the app component that can't be in the document. For example, you cannot use useLoaderData

00:18 inside of an error boundary because the loader might have failed the run. And so we're going to move this stuff up into our app component. And then, yeah, this we want to keep there. All that we want to keep there, the body that we want to keep. So we're really just going to move all of this stuff

00:35 right here, including the data.username, because, again, the loader may not have executed properly. But then also the environment variable stuff that came from the loader. So we're going to have to move that as well. So let's grab all of this, the contents of the body. And here, now that we're in the document component,

00:54 we're going to have a children prop. So let's accept that children prop. And children is a React node, yep. And then we're going to return from our app component the document with all that stuff and then close the document up. And that should actually, you know, we've got to refresh.

01:13 So everything is working the way that it should, as we'd expect. So that's a basic refactor. We didn't really do anything all that interesting. We just refactored this stuff. So next, we need to add that to our error boundary. So we're just going to take document and stick the general error boundary inside of that.

01:33 And with that now, we should be in a pretty good place as far as this is concerned. So let's come and add our error inside the app. And kablooey, it looks awful. But a couple of really cool things out of this. I mean, it looks better than it did before, so that's nice.

01:52 But our head has all of our, like, title, everything else. Our body is there, so it has all of our rules in there. We've got our container and everything. That's our error message, and that has all of the styles applied. So yeah, we nailed it. Good job, you.

02:10 So the basic idea for this exercise was just take all of the stuff that is, like, app-only stuff, stuff that requires the data from the loader data, and move that to the app. Thinking about this more, we could probably put this header in our document component as well,

02:29 but in the future, we're actually going to be using data from the loader to, like, load who the currently logged in user is and stuff. So we're going to leave that where it is. But yeah, you just move everything over to the document, the stuff that doesn't rely on the data, and then you use that document component in your error boundary so that things don't look like garbage.

02:48 And yeah, we make the experience way better, which is always a plus.