A second and third version of this course released using Next 13+, but this course is great if you want to see another example fullstack project. We now recommend you take the Build an AI-Powered Fullstack Next.js App, v3 course.
Transcript from the "Loader Component" Lesson
[00:00:00]
>> We should think about how our page is loading up right now we have a few things on here. So we have this it's taking forever to load because of the delay. So that delay, then we have this component coming in. We kind of want to handle this delay because we're about to add this task card on here, and that's gonna have another requirement for data fetching.
[00:00:20] Although it's not blocking the page like Good projects is it's gonna be more how the greeting card is it'll just render when it gets there. But that delay right there that strong delay while it's loading, right here, this one. Yes, we see the projects here because it's cached, but it won't always be there.
[00:00:38] It's just because it's cached. I'm gonna localhost and And whatnot. So we should probably set up a loader for this page. So what we'll do is we'll go to App Dashboard and then home right next to page. We can make a loader or. Loading dot TSX what what was that Why did it do that it just made a new VS code okay there we go that was weird I've never seen before I got to start this thing over again, okay.
[00:01:27] So all this is going to be is just your classic loader whatever you want to put a spinner the word loading. It doesn't matter. I did make one for us and we could talk about it, but it's mostly just using tailwind. So I'm just gonna pace it in.
[00:01:43] And it's just a loader. It's just using the animate spin on a circle with a dashboard sitting in a card. That's all it is. It's nothing crazy So we have that now and for free, if we just load up our page, We should see a loader like that now.
[00:02:04] Right? That's because the Projects we're loading in. And the projects has like a two second delay or whatever delay I put on the projects I forgot, but that's why you see that. And then when we get in, we see the greetings take four or five seconds to load in because I put the delay on that.
[00:02:26] All right so you literally get granular control over what's loading and how it's loading and what's blocking and what's not blocking. All right And then for the task page, I guess, forgot to put a, a slide for it in here cuz we could just add it to the project.
[00:02:49] It's nothing really special. So what we'll do is just go to the home page, scroll down to where it says task here. Get rid of that. And you can just bring in a task card. Export mine, I forgot to export my. There we go. It was bring that in, it's safe and see if anything broke.
[00:03:27] Boom. There we go, now we got a task card. And remember this one loads very similar to this one, so we would need a skeleton for that one or a shimmer if we wanna handle the loading state for it.