‫So, as I was just saying,
‫let's no go implement that loader.
‫So here in our page, let's go back here.
‫So back to the home, then to the cart,
‫which has a link to the menu.
‫And as I click here, you will see
‫that there is a small delay
‫between the click and the data actually arriving.
‫So that's taking some time here.
‫And so during that time, we of course want to display
‫like a loading spinner or some other loading indicator.
‫Now, in order to be able to display an indicator like this,
‫we need to know whether this data
‫is actually being loaded right now, right?
‫So currently, we don't have that information
‫anywhere here yet, right?
‫So there's no like is loading state somewhere to be seen.
‫And so, we now need to get that information
‫into our application.
‫And in React Router, we can get access
‫to this by using the useNavigation hook.
‫So not use navigate, but really useNavigation.
‫And with this we will be able to see whether the application
‫is currently idle, whether it is loading or submitting.
‫And this information is actually for the entire application.
‫So not just for one page, but really here
‫for the entire router.
‫So if one of these pages here is loading, then
‫the navigation state will become loading no matter which
‫of these pages is actually being loaded.
‫Therefore, it doesn't make much sense to create the loader
‫right here.
‫So that loading indicator in this component.
‫So this is not where we will need to display it
‫because we will never really know whether it is actually
‫this data here that is being loaded.
‫So instead, let's just do one generic big loader right here.
‫So let's use dead hook that I just mentioned.
‫So useNavigation and not navigate.
‫And so here, let's just lock this to the console.
‫So just navigation.
‫All right, let's clear this.
‫And also no longer need dead one.
‫And so here, notice how we have this navigation.state.
‫So here, it is idle.
‫When I click here, then it is idle again.
‫But watch what happens as I click on the menu.
‫So notice that briefly it was loading
‫and then it became idle again.
‫And so using this information, we can now basically create
‫or own isLoading variable.
‫So that's simply navigation.state is equal loading.
‫So whenever this is true,
‫we now want to render that loading indicator.
‫Now we don't have a component for that yet
‫and so let's create that Loader.jsx.
‫Now the name here might be confusing
‫because in React Router, a loader is actually
‫a function that fetches some data.
‫But well, we are already used to this name of Loader.
‫So let's just roll with it here.
‫Alright, now here for now, all we will do
‫is to use the Loader class name, which is part of our CSS.
‫And then here in the layout, actually also
‫I want to temporarily use the Layout class name.
‫So, it looks pretty similar here.
‫But here, then we have basically this cart overview here,
‫basically at the bottom, at the header
‫at the top. ‫Now, right?
‫But anyway, now we want to display that Loading indicator.
‫And so let's do that right here inside this diff.
‫And this Loading indicator is actually
‫a big loader that will overlay the entire page
‫at least later when we actually style it.
‫But anyway, so here now, we want isLoading.
‫And if that's true, then we want to render our Loader
‫and everything else should also be rendered.
‫But basically, it will then appear below this Loader here.
‫But you will see that here in practice
‫once we style all of this.
‫So here, we will not have conditional rendering
‫where we show either this or the Loader
‫but instead, we will always show this.
‫But if we are currently loading
‫then we will also show the Loader.
‫All right, so the Loader give it a safe.
‫And now when I go to the menu,
‫we should already see that Loader here.
‫And indeed, there it was.
‫So that.
‫So, let's do it again, and beautiful.
‫And that's actually it.
‫So this is how we use the global navigation state
‫offer application in order to display the Loader there.