So now we're having all the functionalities in an app, we are able to get the data from the API and
we are displaying it.
The one piece of code that remains is to add the loading screen.
For example, if I just feel refresh now, we will.
We won't be seeing that loading screen with a spinner.
And we want that functionality in an app.
And later on after this, we will be adding spaces in our application.
So let's just head back to our core data and we'll be adding a spinner into our application.
So for that purpose, just head back.
By the way, if you was just here, I may just be having a spinner GIF, which we need to show on screen.
So this is the year that will be loading when we'll have an application is waiting for the data to be
fetch.
So this is the application.
This is the spinner that will read this thing.
So it just closed off all the taps.
And in the components world, I will be creating a new folder with the name spinner new file.
So let's just name it spinner logistics.
Now, this GSX would be using a spin as.
So let's just created, let's import Jack.
And then the Jeff spinner, so they'll be importing it by that name only.
No, this is in.
Those inside the images.
And inside the images we have, spinner.
Yeah, so my coordinator loaded it now after this, but what we do is that will be creating a functional
component.
So let's just create a spinner.
Now, really putting a written statement.
Now inside the inside, this written statement will be having an image element and will give it a source
of spinner.
So we're having our source and we'll give it an alternative name, perhaps loading.
And this, too, would be the victim of inland styling, so let's just style it in line.
OK, so we'll be giving it veto.
About.
Two hundred pixels and after them, which will also give it a margin auto.
OK, so we have given it with a little be of margin and after the margin will also give it a display
of block.
Narrative.
Now what we need to add to it, OK, we are going to close it.
OK, guess I have closed much.
Now we need to export our component back.
So export default.
Spinner.
Now hit save and close this banana and move into Abdul Jaspal.
Now we need to conditionally rendered the example, we only want a screen to appear when our data is
in loading fees.
That means when the loading suit is true and the loading system was set to false when it is loaded,
right?
So head to your character's list component and will be surrounding it and collaborators.
Now what we want is that.
OK, I just got it.
And what they want is that if loading cathedral.
If learning is true, then I want to show there's been a screen.
So then I want to show this screen.
And if not, if loading is false, then I want to show our catalyst.
Now we are yet to import Espinosa.
Let's just import offspinner first.
This story stories in confidence.
OK, it's here.
So now we see that floating is equal to true, then you want to call and spinner and if not, then we
want to call in a catalyst.
And we still see that is OK.
Just remove this.
And he'd.
So now if we just take a look at that application.
OK, so we are unable to resolve our spinners or move back into your co-director and inside the spinner
file.
Spin, Roger Sex.
So it says that we are unable to resolve spinner Soviet in search bar.
OK, concerns at this point about an Ebola reservoir spinner, so let's just reimported, maybe, I
guess there was a wrong address.
And that the images we want to spend on Roger, I would say, you know, that's we're application again.
OK, so we see that we are having a spin up to the point of time that we are anywhere, we are able
to load the images as well as the data.
So this work, this looks good.
Now, the only way stated that the code that we need to write is to make it more beautiful.
So that's what we'll be doing.