1 00:00:01,110 --> 00:00:03,180 ‫So, as I was just saying, 2 00:00:03,180 --> 00:00:06,153 ‫let's no go implement that loader. 3 00:00:07,860 --> 00:00:11,850 ‫So here in our page, let's go back here. 4 00:00:11,850 --> 00:00:14,580 ‫So back to the home, then to the cart, 5 00:00:14,580 --> 00:00:16,470 ‫which has a link to the menu. 6 00:00:16,470 --> 00:00:18,039 ‫And as I click here, you will see 7 00:00:18,039 --> 00:00:19,911 ‫that there is a small delay 8 00:00:19,911 --> 00:00:23,493 ‫between the click and the data actually arriving. 9 00:00:24,750 --> 00:00:26,670 ‫So that's taking some time here. 10 00:00:26,670 --> 00:00:30,540 ‫And so during that time, we of course want to display 11 00:00:30,540 --> 00:00:35,310 ‫like a loading spinner or some other loading indicator. 12 00:00:35,310 --> 00:00:39,564 ‫Now, in order to be able to display an indicator like this, 13 00:00:39,564 --> 00:00:42,570 ‫we need to know whether this data 14 00:00:42,570 --> 00:00:46,635 ‫is actually being loaded right now, right? 15 00:00:46,635 --> 00:00:50,520 ‫So currently, we don't have that information 16 00:00:50,520 --> 00:00:53,160 ‫anywhere here yet, right? 17 00:00:53,160 --> 00:00:57,960 ‫So there's no like is loading state somewhere to be seen. 18 00:00:57,960 --> 00:01:01,081 ‫And so, we now need to get that information 19 00:01:01,081 --> 00:01:03,300 ‫into our application. 20 00:01:03,300 --> 00:01:06,090 ‫And in React Router, we can get access 21 00:01:06,090 --> 00:01:09,810 ‫to this by using the useNavigation hook. 22 00:01:09,810 --> 00:01:13,023 ‫So not use navigate, but really useNavigation. 23 00:01:14,220 --> 00:01:18,120 ‫And with this we will be able to see whether the application 24 00:01:18,120 --> 00:01:23,120 ‫is currently idle, whether it is loading or submitting. 25 00:01:23,400 --> 00:01:28,290 ‫And this information is actually for the entire application. 26 00:01:28,290 --> 00:01:32,160 ‫So not just for one page, but really here 27 00:01:32,160 --> 00:01:34,140 ‫for the entire router. 28 00:01:34,140 --> 00:01:37,230 ‫So if one of these pages here is loading, then 29 00:01:37,230 --> 00:01:41,250 ‫the navigation state will become loading no matter which 30 00:01:41,250 --> 00:01:44,243 ‫of these pages is actually being loaded. 31 00:01:44,243 --> 00:01:48,644 ‫Therefore, it doesn't make much sense to create the loader 32 00:01:48,644 --> 00:01:50,370 ‫right here. 33 00:01:50,370 --> 00:01:53,370 ‫So that loading indicator in this component. 34 00:01:53,370 --> 00:01:56,340 ‫So this is not where we will need to display it 35 00:01:56,340 --> 00:01:59,550 ‫because we will never really know whether it is actually 36 00:01:59,550 --> 00:02:02,490 ‫this data here that is being loaded. 37 00:02:02,490 --> 00:02:07,490 ‫So instead, let's just do one generic big loader right here. 38 00:02:09,840 --> 00:02:14,463 ‫So let's use dead hook that I just mentioned. 39 00:02:17,340 --> 00:02:22,340 ‫So useNavigation and not navigate. 40 00:02:23,942 --> 00:02:27,573 ‫And so here, let's just lock this to the console. 41 00:02:29,430 --> 00:02:31,443 ‫So just navigation. 42 00:02:33,330 --> 00:02:35,970 ‫All right, let's clear this. 43 00:02:35,970 --> 00:02:40,970 ‫And also no longer need dead one. 44 00:02:41,100 --> 00:02:45,333 ‫And so here, notice how we have this navigation.state. 45 00:02:47,310 --> 00:02:48,420 ‫So here, it is idle. 46 00:02:48,420 --> 00:02:51,930 ‫When I click here, then it is idle again. 47 00:02:51,930 --> 00:02:55,203 ‫But watch what happens as I click on the menu. 48 00:02:56,430 --> 00:02:59,580 ‫So notice that briefly it was loading 49 00:02:59,580 --> 00:03:01,563 ‫and then it became idle again. 50 00:03:02,550 --> 00:03:06,960 ‫And so using this information, we can now basically create 51 00:03:06,960 --> 00:03:09,993 ‫or own isLoading variable. 52 00:03:10,890 --> 00:03:15,890 ‫So that's simply navigation.state is equal loading. 53 00:03:20,910 --> 00:03:22,440 ‫So whenever this is true, 54 00:03:22,440 --> 00:03:26,220 ‫we now want to render that loading indicator. 55 00:03:26,220 --> 00:03:28,980 ‫Now we don't have a component for that yet 56 00:03:28,980 --> 00:03:33,667 ‫and so let's create that Loader.jsx. 57 00:03:35,580 --> 00:03:37,500 ‫Now the name here might be confusing 58 00:03:37,500 --> 00:03:40,980 ‫because in React Router, a loader is actually 59 00:03:40,980 --> 00:03:43,380 ‫a function that fetches some data. 60 00:03:43,380 --> 00:03:47,700 ‫But well, we are already used to this name of Loader. 61 00:03:47,700 --> 00:03:49,953 ‫So let's just roll with it here. 62 00:03:50,790 --> 00:03:55,050 ‫Alright, now here for now, all we will do 63 00:03:55,050 --> 00:04:00,050 ‫is to use the Loader class name, which is part of our CSS. 64 00:04:03,420 --> 00:04:06,600 ‫And then here in the layout, actually also 65 00:04:06,600 --> 00:04:11,600 ‫I want to temporarily use the Layout class name. 66 00:04:12,960 --> 00:04:14,880 ‫So, it looks pretty similar here. 67 00:04:14,880 --> 00:04:18,720 ‫But here, then we have basically this cart overview here, 68 00:04:20,670 --> 00:04:22,800 ‫basically at the bottom, at the header 69 00:04:22,800 --> 00:04:27,000 ‫at the top. ‫Now, right? 70 00:04:27,000 --> 00:04:31,410 ‫But anyway, now we want to display that Loading indicator. 71 00:04:31,410 --> 00:04:35,640 ‫And so let's do that right here inside this diff. 72 00:04:35,640 --> 00:04:37,952 ‫And this Loading indicator is actually 73 00:04:37,952 --> 00:04:42,630 ‫a big loader that will overlay the entire page 74 00:04:42,630 --> 00:04:45,303 ‫at least later when we actually style it. 75 00:04:46,830 --> 00:04:50,517 ‫But anyway, so here now, we want isLoading. 76 00:04:51,780 --> 00:04:56,050 ‫And if that's true, then we want to render our Loader 77 00:04:57,570 --> 00:05:00,750 ‫and everything else should also be rendered. 78 00:05:00,750 --> 00:05:05,750 ‫But basically, it will then appear below this Loader here. 79 00:05:05,818 --> 00:05:07,860 ‫But you will see that here in practice 80 00:05:07,860 --> 00:05:10,410 ‫once we style all of this. 81 00:05:10,410 --> 00:05:14,190 ‫So here, we will not have conditional rendering 82 00:05:14,190 --> 00:05:17,760 ‫where we show either this or the Loader 83 00:05:17,760 --> 00:05:20,280 ‫but instead, we will always show this. 84 00:05:20,280 --> 00:05:22,470 ‫But if we are currently loading 85 00:05:22,470 --> 00:05:24,933 ‫then we will also show the Loader. 86 00:05:26,520 --> 00:05:31,520 ‫All right, so the Loader give it a safe. 87 00:05:34,320 --> 00:05:36,060 ‫And now when I go to the menu, 88 00:05:36,060 --> 00:05:38,850 ‫we should already see that Loader here. 89 00:05:38,850 --> 00:05:41,400 ‫And indeed, there it was. 90 00:05:41,400 --> 00:05:42,810 ‫So that. 91 00:05:42,810 --> 00:05:46,773 ‫So, let's do it again, and beautiful. 92 00:05:47,700 --> 00:05:49,680 ‫And that's actually it. 93 00:05:49,680 --> 00:05:52,950 ‫So this is how we use the global navigation state 94 00:05:52,950 --> 00:05:57,633 ‫offer application in order to display the Loader there.