Okay.
Now let's take a look at loading indicators so that we notify the user if something's going on.
Like data is being fetched from our API for example.
So we'll go back to VS code.
And the goal of this really is just to dispatch an action that is going to update the redux state when
we're fetching data from our API.
And once we have the result back from our API, whether or not it's an error or it's the actual result,
then we turn off the loading indicator by dispatching another action.
Then from that global state, we can check to see what the loading status is and turn on or turn off
a loading indicator accordingly.
So to do this we're going to create some more global states.
And we're going to have a Redux slice inside our layout folder in the app folder.
So I'm going to create a new file.
And I'm just going to call this UI slice dot Estes, as we'll use this for other user interface things
that we want to store globally in our global state.
So I'm just going to say export const and say UI slice equals.
And we'll say create slice that we get from Redux Toolkit.
Obviously this one's not going to be asynchronous.
We're not making an API fetch call here.
We're just really updating a flag inside our global state here.
So I'm going to give it a name of UI.
The next line will specify the initial state.
And we'll just do this in line inside here.
I'll open curly brackets and we'll just have an is loading flag.
And I'm going to set that to false initially.
And below the initial state we have our reducers.
And we'll have a reducer to start loading.
And we'll pass in the states as the argument.
Open the arrow and curly Brackets and will specify state dot isloading is equal to true, and then below
the start loading we'll have a stop loading and once again we pass it the states.
Add the arrow, open curly brackets and we'll say state dot is loading equals false.
Pretty straightforward stuff.
And then below the slice we'll export const open curly brackets and say equals UI slice dot actions.
And then we will just have the start loading and stop loading as actions that we can use.
And of course where we're going to use those is going to be in our base API.
But first of all, we need to tell our store about our new slice.
So we're going to open up the store TS.
And inside here just below the counter I'll specify the UI or give it a name of UI and say UI slice
dot reducer.
And that brings in the UI slice from where we've declared it.
And then we can head over to our base API.
And we can dispatch the actions that we have just created inside the UI slice to start and stop loading.
So inside the base query with error handling, then this argument here, this API argument.
This gives us access to Redux effectively.
So if I remove the comment to start loading I'll replace it with API.
And then notice that we've got the ability to get the state here.
And we can also dispatch actions from here as well.
So I'm going to say API dispatch and then use the start loading function that we've created.
And that will change our Redux state for its loading flag to be true.
And then we can just do the same for the stop loading.
So I'm going to say API dispatch and then stop loading.
And if we go and take a look at our progress and let's open up the Chrome DevTools and we'll just take
a look at Redux and I'll just get the Redux tools open.
And let's go to or let's just refresh the page first of all.
And what we should see is inside here we've got our action to go and start loading.
That's where we're going out to our API.
After we've got the result back then we stop loading and we turn off the is loading flag there.
So that's the functionality that we're going to use now.
Now we just need a loading indicator to display in the UI.
So if we go and take a look at what is available from material UI, and we'll go to the docs and material
UI and go to the components.
And if we take a look for progress we're looking for inside here, then we've got different options
about how we wish to display a loading indicator to the user, we can use a circular one, and typically
we would take over the background of the web app at this point and stop the user from clicking on anything.
That's an option, but I'm going to go for the linear options this time, and we're going to have a
loading bar at the top of our page, which doesn't hide any of the user interface, and it lets the
user know that something is going on.
So that's the approach we'll take.
We'll add this into our application.
So I'm going to head over to the code again.
And we're going to use our state inside our navbar.
So I'm going to open up the navbar dot TSX.
And then inside here we can use our app selector to get hold of the loading state from our Redux store.
So inside here, just before the return statement I'm going to say const and then is loading equals
use app selector.
And I'm going to specify states and use the arrow and say states dot UI as that's where we're getting
our loading flag from.
Now inside the navbar, just underneath or just before the app bar closing tag and just after the toolbar,
let's use curly brackets and say is loading.
And if we are then we're going to use double ampersand.
And if we are loading or is loading is set to true, then any code to the right of the ampersand is
executed and will open parentheses.
And we're going to have inside a box.
We're going to make use of the linear progress and make it self-closing and give it a color of secondary.
And for the box we'll just make sure it takes up the full width of its container and give it a width
of 100%.
And if we go and take a look and see how we're doing now, we'll go back to our application And looks
like I've got some warnings, but I expect these are going to be from hot reloading.
So let's just refresh the page again.
And what we did see there was a loading indicator.
So I'll give that another go.
And we can see the loading flag we've still got loading down there in the page.
But we'll deal with that later.
And if I go back to the catalog we're loading again and click a different product.
And great.
Now we've got loading indication in our application.
It's centralized so that any API request that we make to the API, we're going to see that loading flag.
If we need to go out and load something, such as clicking on a product that we haven't loaded before.
Perfect.
And what we'll take a look at next is a small challenge for yourself.
We're going to move our dark mode functionality into Redux and also persist it so that if I do set dark
mode and I refresh the page, I would like that to persist as well.
We'll take a look at setting that up for the challenge next.