Loading & Error

[00:00:00]
>> Loading and Error. So loading and error is actually pretty cool. Anyone ever heard of React Suspense? All right never heard of React Suspense. So React Suspense basically allows you to stream. You can basically stream the data in from a component and show some type of loading state while that's happening.

[00:00:23]
It's like async and it's components almost, so you can wait for that component to load and show some type of loading component while that's loading, it's the simplest way I can describe it. There is a suspense component in which you can set that up manually. But we get that for free if we just make a loading JS file, or TSX, or JSX file in whatever directory in which a page or a layout is fetching data.

[00:00:51]
So while that page or layout is fetching data, in the meantime it will instantly show your loading component to the client and then when your data comes back without an error then it will show that component. So we get that for free just by making a new file.

[00:01:04]
The same is true for error state, so if something errors out we can show a component. If while fetching data on that page errored out, we get that for free. Which is basically what they introduced, I don't know what version don't quote me, maybe 15, where they had error boundaries.

[00:01:20]
Is basically you're just wrapping your page or layout an error boundary, which is like a try catch for components. Is the best way I can describe, it's literally a try catch for a component, which is genius. So we get those for free. So let's check it out. So if I go to the to dues folder here inside the dashboard, I can make a loading dot TSX, right?

[00:01:40]
And I can say this is loading. And it's gonna return a div that says loading, like that. Export default that So we have that. And then just to demonstrate the loading, I'm just going to exaggerate how long this takes. So I'm just gonna await a promise right quick on this get data inside of todos.

[00:02:17]
Let's say two seconds. That should be good. So I'm just gonna wait that, you don't have to add this in if you don't want to be dramatic, but I'm just just waiting that. So we get that two seconds there. We have our loading file it just says loading.

[00:02:34]
Let's see what happens. So now if I go back Now refresh as you can see, it's loading, it's loading and then boom, two seconds later, it shows up, right? We got that for free. All we had to do was just make a file. Right, and it's instant. So I think that's pretty cool, right?

[00:02:54]
And the loading files or client components, so you can do client things in here. I think by default they are, I don't think you need to do this. I don't think this even changes anything, because they have to be client components, because you're already there on the client.

[00:03:09]
If it had to go make a round trip to the server to show, that would defeat the point. It just swaps it out, so. And the same is true for error. So if we go and make an error one like this. Pretty much it's gonna copy the same thing.

[00:03:27]
We don't need to use clients. Call this the ErrorUI. I can't call it error capital E, cuz that's already a thing in JavaScript. So I'll just say Error here, ErrorUI and just do something like, oops. Right, so we got that. And then I'm just gonna make this thing error and best way to do that, my example is just to call reject.

[00:03:51]
So I'm just gonna reject this like that. So after two seconds, it should load and then it should freak out so let's see what happens. What is this. What do you want? I think it does want that it wants me to put the use client here. There we go cool and what is this words?

[00:04:22]
I misspelled it. There we go. Okay, cool, so it's loading. And then, oops, we get an error. All right, so we get that for free. Just by making two files don't really have to do anything. Yeah, you could do this and react yourself but setting this up [SOUND] been there.

[00:04:41]
It's a lot of work.