1
00:00:00,050 --> 00:00:00,560
All right.

2
00:00:00,560 --> 00:00:03,090
And up next, let's set up the global loading.

3
00:00:03,110 --> 00:00:04,760
Now, what am I talking about?

4
00:00:04,790 --> 00:00:11,060
Well, if we navigate to our application, especially the production one, and let's say we take a look

5
00:00:11,060 --> 00:00:18,260
at the stats or all jobs, we notice that it freezes a little bit when we navigate to these pages.

6
00:00:18,290 --> 00:00:24,530
Now, the reason for that is because even though we're pre-fetching, it still takes a little bit of

7
00:00:24,530 --> 00:00:26,330
time to fetch the data.

8
00:00:27,070 --> 00:00:34,570
And I think it's very useful if we display a loading spinner so the user knows that something is happening.

9
00:00:34,600 --> 00:00:39,370
Now, the way we do that is actually by using the use navigation hook.

10
00:00:39,400 --> 00:00:42,990
Remember, we use this hook when we were submitting the form.

11
00:00:43,000 --> 00:00:45,760
We can also check for loading state.

12
00:00:45,910 --> 00:00:53,440
And if it's the case, if we're loading the data, actually we can display Loading Spinner.

13
00:00:53,560 --> 00:01:00,100
Now, for starters, we want to navigate to the components and we want to create the loading component.

14
00:01:00,130 --> 00:01:05,680
Now what's really awesome, I'm using this global class, which essentially I use in pretty much all

15
00:01:05,680 --> 00:01:11,100
of my projects, and I'll show you where it's located in the index CSS.

16
00:01:11,110 --> 00:01:13,570
So for starters, we want to navigate to the client.

17
00:01:13,600 --> 00:01:17,810
Of course we're looking for components and we want to create a new one.

18
00:01:17,830 --> 00:01:21,070
So let's go here with loading.

19
00:01:21,340 --> 00:01:29,690
JS, Let's create the component and effectively it's just going to return a div that is not going to

20
00:01:29,690 --> 00:01:34,060
be any content and we'll simply use this loading class.

21
00:01:34,070 --> 00:01:39,790
So let me remove this over here and let's right away set up the import and export.

22
00:01:39,800 --> 00:01:41,720
So let's copy and paste.

23
00:01:41,750 --> 00:01:42,860
We're looking for the.

24
00:01:43,380 --> 00:01:45,060
Loading one in this case.

25
00:01:46,510 --> 00:01:52,360
And then before we implement in the dashboard, let me just showcase the CSS part.

26
00:01:52,390 --> 00:01:55,780
If you navigate to index CSS, again, this is CSS.

27
00:01:55,810 --> 00:01:58,120
I use pretty much in all of my projects.

28
00:01:58,120 --> 00:02:01,270
And then let's look for loading somewhere here.

29
00:02:02,010 --> 00:02:02,520
Yep.

30
00:02:02,520 --> 00:02:03,210
Notice over here.

31
00:02:03,210 --> 00:02:06,600
So width and height, then border and border radius.

32
00:02:06,810 --> 00:02:14,280
And then in order to set up the spinner, I use the animation where I just rotate.

33
00:02:14,860 --> 00:02:16,780
360 degrees.

34
00:02:17,440 --> 00:02:20,640
And now let's navigate to the page.

35
00:02:20,650 --> 00:02:26,650
So we're looking for our dashboard layout since that's where.

36
00:02:27,390 --> 00:02:29,010
All of the pages meet?

37
00:02:29,040 --> 00:02:29,760
Correct.

38
00:02:29,760 --> 00:02:31,620
Since that's our main page.

39
00:02:31,620 --> 00:02:34,650
And here we want to grab the hook.

40
00:02:34,740 --> 00:02:37,860
So we want to go use navigation.

41
00:02:38,660 --> 00:02:39,710
Let's save it.

42
00:02:39,710 --> 00:02:40,730
And.

43
00:02:41,700 --> 00:02:46,530
I guess in my case, I'm going to do it right after the state values or you know what?

44
00:02:46,560 --> 00:02:48,510
Since I'm using the navigator over here.

45
00:02:49,370 --> 00:02:52,400
I'll do it the same way, so I'm going to go with const.

46
00:02:52,430 --> 00:02:55,160
We want to come up with navigation.

47
00:02:55,160 --> 00:02:55,370
Again.

48
00:02:55,370 --> 00:02:56,830
This is not use navigate.

49
00:02:56,840 --> 00:03:00,260
We're not navigating away, we're just checking the state.

50
00:03:00,260 --> 00:03:05,690
So we'll set it equal to use navigation, we'll invoke it.

51
00:03:05,690 --> 00:03:11,990
And remember there's this state property and one of the values is loading.

52
00:03:12,110 --> 00:03:19,760
So we're going to go here with const is page loading and we'll set it equal to navigation.

53
00:03:20,640 --> 00:03:22,140
And then that state.

54
00:03:22,140 --> 00:03:25,410
And if it's equal to a loading, then what do we want to do?

55
00:03:25,410 --> 00:03:27,450
Well, we want to display the loading spinner.

56
00:03:27,450 --> 00:03:28,020
Correct.

57
00:03:28,020 --> 00:03:30,630
So let's navigate to our imports.

58
00:03:30,630 --> 00:03:34,320
Let's grab our loading one and let's scroll down.

59
00:03:35,130 --> 00:03:37,680
Where we have the outlet.

60
00:03:38,680 --> 00:03:40,720
We'll set up the ternary operator.

61
00:03:40,720 --> 00:03:45,460
So if the state is equal to loading, we'll show the spinner.

62
00:03:45,850 --> 00:03:52,240
And if it's not, if we already received the data, then we'll display the outlet.

63
00:03:52,270 --> 00:03:53,560
So let's set up here.

64
00:03:53,560 --> 00:03:56,980
The curlies we'll say is page loading.

65
00:03:57,280 --> 00:04:01,510
And if it's the case, I want to go with my loading component.

66
00:04:01,510 --> 00:04:04,540
And if it's not the case, then I'll display the outlet.

67
00:04:04,540 --> 00:04:06,010
So let me cut it out.

68
00:04:06,040 --> 00:04:07,570
Let me set it up over here.

69
00:04:07,690 --> 00:04:10,840
Let me navigate back to my application.

70
00:04:10,960 --> 00:04:16,510
We can definitely test it with the setup one as well, basically with a test user.

71
00:04:16,510 --> 00:04:17,940
So let's navigate to all jobs.

72
00:04:17,950 --> 00:04:21,820
Notice there was this loading spinner and the same goes for the stats.

73
00:04:21,820 --> 00:04:25,090
So that's how we can set up the global loading.

74
00:04:25,090 --> 00:04:27,670
Now why am I calling this global loading?

75
00:04:27,670 --> 00:04:35,140
Because effectively we add it in a dashboard layout, basically our parent and therefore pretty much

76
00:04:35,170 --> 00:04:39,320
every page that is going to be in that loading state.

77
00:04:40,110 --> 00:04:44,610
Is going to trigger it and therefore it will display the component first.