WEBVTT 00:00.350 --> 00:00.770 Okay. 00:00.770 --> 00:05.750 Now let's take a look at loading indicators so that we notify the user if something's going on. 00:05.750 --> 00:09.140 Like data is being fetched from our API for example. 00:09.170 --> 00:11.450 So we'll go back to VS code. 00:11.450 --> 00:19.610 And the goal of this really is just to dispatch an action that is going to update the redux state when 00:19.610 --> 00:21.950 we're fetching data from our API. 00:21.980 --> 00:27.920 And once we have the result back from our API, whether or not it's an error or it's the actual result, 00:27.920 --> 00:32.990 then we turn off the loading indicator by dispatching another action. 00:33.140 --> 00:39.260 Then from that global state, we can check to see what the loading status is and turn on or turn off 00:39.260 --> 00:42.080 a loading indicator accordingly. 00:42.110 --> 00:46.280 So to do this we're going to create some more global states. 00:46.280 --> 00:52.550 And we're going to have a Redux slice inside our layout folder in the app folder. 00:52.700 --> 00:54.350 So I'm going to create a new file. 00:54.350 --> 01:01.840 And I'm just going to call this UI slice dot Estes, as we'll use this for other user interface things 01:01.840 --> 01:05.860 that we want to store globally in our global state. 01:05.890 --> 01:13.240 So I'm just going to say export const and say UI slice equals. 01:13.240 --> 01:19.090 And we'll say create slice that we get from Redux Toolkit. 01:19.120 --> 01:21.760 Obviously this one's not going to be asynchronous. 01:21.790 --> 01:23.710 We're not making an API fetch call here. 01:23.710 --> 01:27.310 We're just really updating a flag inside our global state here. 01:27.310 --> 01:29.410 So I'm going to give it a name of UI. 01:29.440 --> 01:32.080 The next line will specify the initial state. 01:32.080 --> 01:34.390 And we'll just do this in line inside here. 01:34.420 --> 01:37.900 I'll open curly brackets and we'll just have an is loading flag. 01:37.900 --> 01:40.900 And I'm going to set that to false initially. 01:40.900 --> 01:44.440 And below the initial state we have our reducers. 01:44.440 --> 01:47.710 And we'll have a reducer to start loading. 01:47.710 --> 01:50.950 And we'll pass in the states as the argument. 01:50.980 --> 01:58.440 Open the arrow and curly Brackets and will specify state dot isloading is equal to true, and then below 01:58.440 --> 02:03.450 the start loading we'll have a stop loading and once again we pass it the states. 02:03.480 --> 02:09.930 Add the arrow, open curly brackets and we'll say state dot is loading equals false. 02:09.960 --> 02:11.760 Pretty straightforward stuff. 02:11.760 --> 02:22.680 And then below the slice we'll export const open curly brackets and say equals UI slice dot actions. 02:22.770 --> 02:29.640 And then we will just have the start loading and stop loading as actions that we can use. 02:29.640 --> 02:34.170 And of course where we're going to use those is going to be in our base API. 02:34.200 --> 02:38.220 But first of all, we need to tell our store about our new slice. 02:38.220 --> 02:40.770 So we're going to open up the store TS. 02:41.100 --> 02:49.380 And inside here just below the counter I'll specify the UI or give it a name of UI and say UI slice 02:49.430 --> 02:50.660 dot reducer. 02:51.290 --> 02:55.070 And that brings in the UI slice from where we've declared it. 02:55.340 --> 02:58.100 And then we can head over to our base API. 02:58.220 --> 03:05.360 And we can dispatch the actions that we have just created inside the UI slice to start and stop loading. 03:05.870 --> 03:13.820 So inside the base query with error handling, then this argument here, this API argument. 03:13.820 --> 03:16.280 This gives us access to Redux effectively. 03:16.280 --> 03:21.200 So if I remove the comment to start loading I'll replace it with API. 03:21.200 --> 03:25.010 And then notice that we've got the ability to get the state here. 03:25.010 --> 03:28.640 And we can also dispatch actions from here as well. 03:28.640 --> 03:35.270 So I'm going to say API dispatch and then use the start loading function that we've created. 03:35.300 --> 03:40.130 And that will change our Redux state for its loading flag to be true. 03:40.130 --> 03:43.070 And then we can just do the same for the stop loading. 03:43.070 --> 03:47.380 So I'm going to say API dispatch and then stop loading. 03:47.410 --> 03:54.280 And if we go and take a look at our progress and let's open up the Chrome DevTools and we'll just take 03:54.280 --> 03:58.480 a look at Redux and I'll just get the Redux tools open. 03:58.870 --> 04:03.880 And let's go to or let's just refresh the page first of all. 04:03.910 --> 04:08.770 And what we should see is inside here we've got our action to go and start loading. 04:08.950 --> 04:11.080 That's where we're going out to our API. 04:11.200 --> 04:16.780 After we've got the result back then we stop loading and we turn off the is loading flag there. 04:17.140 --> 04:19.570 So that's the functionality that we're going to use now. 04:19.900 --> 04:23.530 Now we just need a loading indicator to display in the UI. 04:23.560 --> 04:30.160 So if we go and take a look at what is available from material UI, and we'll go to the docs and material 04:30.190 --> 04:32.620 UI and go to the components. 04:32.620 --> 04:39.430 And if we take a look for progress we're looking for inside here, then we've got different options 04:39.430 --> 04:45.020 about how we wish to display a loading indicator to the user, we can use a circular one, and typically 04:45.020 --> 04:51.170 we would take over the background of the web app at this point and stop the user from clicking on anything. 04:51.200 --> 04:56.450 That's an option, but I'm going to go for the linear options this time, and we're going to have a 04:56.450 --> 05:02.150 loading bar at the top of our page, which doesn't hide any of the user interface, and it lets the 05:02.150 --> 05:03.980 user know that something is going on. 05:03.980 --> 05:05.300 So that's the approach we'll take. 05:05.300 --> 05:07.760 We'll add this into our application. 05:07.760 --> 05:10.280 So I'm going to head over to the code again. 05:10.280 --> 05:14.120 And we're going to use our state inside our navbar. 05:14.120 --> 05:16.730 So I'm going to open up the navbar dot TSX. 05:17.000 --> 05:25.010 And then inside here we can use our app selector to get hold of the loading state from our Redux store. 05:25.010 --> 05:32.690 So inside here, just before the return statement I'm going to say const and then is loading equals 05:32.690 --> 05:34.550 use app selector. 05:34.670 --> 05:40.840 And I'm going to specify states and use the arrow and say states dot UI as that's where we're getting 05:40.840 --> 05:42.370 our loading flag from. 05:42.760 --> 05:51.790 Now inside the navbar, just underneath or just before the app bar closing tag and just after the toolbar, 05:51.820 --> 05:55.330 let's use curly brackets and say is loading. 05:55.840 --> 05:58.420 And if we are then we're going to use double ampersand. 05:58.420 --> 06:04.870 And if we are loading or is loading is set to true, then any code to the right of the ampersand is 06:04.870 --> 06:08.200 executed and will open parentheses. 06:08.200 --> 06:11.320 And we're going to have inside a box. 06:11.320 --> 06:19.960 We're going to make use of the linear progress and make it self-closing and give it a color of secondary. 06:20.080 --> 06:26.620 And for the box we'll just make sure it takes up the full width of its container and give it a width 06:26.620 --> 06:29.500 of 100%. 06:29.500 --> 06:35.130 And if we go and take a look and see how we're doing now, we'll go back to our application And looks 06:35.130 --> 06:38.220 like I've got some warnings, but I expect these are going to be from hot reloading. 06:38.220 --> 06:39.990 So let's just refresh the page again. 06:39.990 --> 06:43.110 And what we did see there was a loading indicator. 06:43.110 --> 06:44.190 So I'll give that another go. 06:44.190 --> 06:47.970 And we can see the loading flag we've still got loading down there in the page. 06:47.970 --> 06:49.320 But we'll deal with that later. 06:49.350 --> 06:53.520 And if I go back to the catalog we're loading again and click a different product. 06:53.520 --> 06:54.360 And great. 06:54.390 --> 06:57.300 Now we've got loading indication in our application. 06:57.300 --> 07:03.900 It's centralized so that any API request that we make to the API, we're going to see that loading flag. 07:03.900 --> 07:09.570 If we need to go out and load something, such as clicking on a product that we haven't loaded before. 07:09.600 --> 07:10.710 Perfect. 07:10.710 --> 07:14.970 And what we'll take a look at next is a small challenge for yourself. 07:15.570 --> 07:23.550 We're going to move our dark mode functionality into Redux and also persist it so that if I do set dark 07:23.580 --> 07:27.870 mode and I refresh the page, I would like that to persist as well. 07:27.900 --> 07:31.230 We'll take a look at setting that up for the challenge next.