Before we start setting up the products I would want to work on loading.
Essentially when we open up our application if we're still loading up the product.
Well I would want to show the component and then only when we get the product then of course we're going
to display all our product.
So we're gonna head over back to our app and line.
I don't wanna be here I wouldn't want to open up the sidebar then we're gonna look for the loading component
that is sitting within the components and then within the loading component again instead of adding
one we're gonna set up our component first we're going to import our loading Jif so we import loading
Jif that is coming from the assets or from and then we look for assets and then the name is loading
and Jeff not get not a jig but instead we have Jeff and then as far as the component it's going to be
somewhat simple where we're gonna have a div then we're gonna attach a class on the class name is going
to be surprise surprise loading.
And then within a div we're gonna have one heading to the text of loading.
So loading.
And then three dots something like this.
And then also I want to display my Jeff so going to say image source is gonna be my loading variable
and then of course I also want some alternative text and I'm going to say loading Jeff.
Now I'm going to head over to a product context and since I have my state variable when I run my callback
function before I set up my request I would want to set a loading to true.
So I have my function that controls the state value and I'm gonna set this to true because I would want
to show the loading component while the actual tier of quest takes place.
So we're going to space here set loading and then of course we're gonna set it equal to true.
So while the asian DP request is happening then the loading is going to be true.
However the moment we get back.
Of course our data.
So right after we run that product we're going to run set loading and then in this case it is going
to be false.
So that would be a product context.
Now we also would want to head over to a product page in fact use the fact that we have access to a
loading state value.
Right.
And in this case what we're going to do we're gonna set up a if statement where if let's say we're still
loading then we're gonna show the loading component.
However if everything is correct then we're gonna display the product list.
So essentially once we have all our data then we're just gonna display our product and the way it's
going to look like.
First of all let's get a loading one.
So I'm going to go with a loading from and then of course we're looking for our components components
and then we're looking for the loading loading.
And I would also want to import a product list.
So that's gonna be the component that we're going to display once we have all our products.
So import import and then product list which again currently is just gonna be a simple heading one.
And this is coming from the components and then from the product folder.
So we'll look within the product and then we have our product list.
So those are the two components we're going to need.
And now instead of returning and adding one we're going to say following way we're going to have a loading.
So if loading is true then I would want to return a loading component loading component.
However once I have all my products I'm just going to write a return.
And then in this case I'm going to have a product list and then I'm gonna pass into props and currently
they're not going to make sense because we're going to start working on those props in the next video
but the POPs are gonna be title and I'm going to say our product and the reason why we're using this
product list because also within a feature I'm going to utilize the product list and I'm just gonna
make sense a little bit later on but we're going to have a component that accepts two things.
The title as well as the data and it's just gonna render the data and render the title.
And we're doing that because we would want to utilize it in featured products as well.
And the second proper name is product.
And then we're just gonna pass in whatever product we're getting back from our product context.
Let's save it.
And in this case of course we're going to have an hour I need to close out my component and currently
I have hello from products list.
However if we're gonna head over to let's say product context and if I'm going to limit set loading
to false you're going to see that we're going to render our loading Jeff so I can see that while the
loading is gonna take place then we're going to show of course our Jeff.
And then once it is successful once we have our data that of course we're going to display the product
list which currently is just a hearing one but we're going to work on it in the next video.