All right.
And up next, let's set up the global loading.
Now, what am I talking about?
Well, if we navigate to our application, especially the production one, and let's say we take a look
at the stats or all jobs, we notice that it freezes a little bit when we navigate to these pages.
Now, the reason for that is because even though we're pre-fetching, it still takes a little bit of
time to fetch the data.
And I think it's very useful if we display a loading spinner so the user knows that something is happening.
Now, the way we do that is actually by using the use navigation hook.
Remember, we use this hook when we were submitting the form.
We can also check for loading state.
And if it's the case, if we're loading the data, actually we can display Loading Spinner.
Now, for starters, we want to navigate to the components and we want to create the loading component.
Now what's really awesome, I'm using this global class, which essentially I use in pretty much all
of my projects, and I'll show you where it's located in the index CSS.
So for starters, we want to navigate to the client.
Of course we're looking for components and we want to create a new one.
So let's go here with loading.
JS, Let's create the component and effectively it's just going to return a div that is not going to
be any content and we'll simply use this loading class.
So let me remove this over here and let's right away set up the import and export.
So let's copy and paste.
We're looking for the.
Loading one in this case.
And then before we implement in the dashboard, let me just showcase the CSS part.
If you navigate to index CSS, again, this is CSS.
I use pretty much in all of my projects.
And then let's look for loading somewhere here.
Yep.
Notice over here.
So width and height, then border and border radius.
And then in order to set up the spinner, I use the animation where I just rotate.
360 degrees.
And now let's navigate to the page.
So we're looking for our dashboard layout since that's where.
All of the pages meet?
Correct.
Since that's our main page.
And here we want to grab the hook.
So we want to go use navigation.
Let's save it.
And.
I guess in my case, I'm going to do it right after the state values or you know what?
Since I'm using the navigator over here.
I'll do it the same way, so I'm going to go with const.
We want to come up with navigation.
Again.
This is not use navigate.
We're not navigating away, we're just checking the state.
So we'll set it equal to use navigation, we'll invoke it.
And remember there's this state property and one of the values is loading.
So we're going to go here with const is page loading and we'll set it equal to navigation.
And then that state.
And if it's equal to a loading, then what do we want to do?
Well, we want to display the loading spinner.
Correct.
So let's navigate to our imports.
Let's grab our loading one and let's scroll down.
Where we have the outlet.
We'll set up the ternary operator.
So if the state is equal to loading, we'll show the spinner.
And if it's not, if we already received the data, then we'll display the outlet.
So let's set up here.
The curlies we'll say is page loading.
And if it's the case, I want to go with my loading component.
And if it's not the case, then I'll display the outlet.
So let me cut it out.
Let me set it up over here.
Let me navigate back to my application.
We can definitely test it with the setup one as well, basically with a test user.
So let's navigate to all jobs.
Notice there was this loading spinner and the same goes for the stats.
So that's how we can set up the global loading.
Now why am I calling this global loading?
Because effectively we add it in a dashboard layout, basically our parent and therefore pretty much
every page that is going to be in that loading state.
Is going to trigger it and therefore it will display the component first.