We've now got some styling on our application and it's looking pretty good but there's just one thing
that's kind of awkward about it.
Remember as I'm refreshing the page my location is instantly detected because I have done an override
on my geolocation.
What we need to think about the first time user experience like the first time a user loads up our app
and they might be sitting there waiting for the location to be detected.
And while they're waiting for that well this page might not quite look so pretty.
Let me show you what I mean.
I'm going to go ahead and reset my location preferences right here and then I'll refresh the page just
as before when the page is first loading up and we're waiting to get our geolocation.
We see this very white background with this kind of ugly text up here that just says Loading.
When I finally click allow.
Well then it turns into something kind of nice.
So I think that in order to make this page a little bit more user friendly that is right now we should
really try to get some type of better interface here.
When the page is still loading up.
So let's kind of brainstorm here a little bit.
I want you to flip over if you saw this open to the semantic UI documentation.
And then once inside if you're going to look on the left hand menu I know when to go down to loader
right here underneath the elements section so on the loader we can put essentially a nice spinning icon
with a black background and some text to tell the user that hey we're like trying to do something here.
I think that doing a full screen loading animation like this would be a lot more appropriate than just
showing that while loading techs up there while we wait for the approval to get the user's location.
So let's try putting this together now before writing any code for this.
I want you to think about where we're going to place this spinner thing inside of our application really
quickly if you want to you can click on that little code icon right there.
It'll show you the h each female or her case GSX that we have to write out to get that effect.
Without a doubt if we want to stick that into our render method of our app component it would mean that
we would not be able to reuse that spinner in other locations inside of our location.
Now at this point our app is pretty simple very straightforward but when ever we're putting together
re-act application as much as possible we want to try at least try to make reusable components.
So all I'm trying to say here is that I think that rather than just sticking in some Rajya sex right
here for when we are in the case of looting I think that we should instead create a separate component
whose sole purpose will be to show a spinner like this on the screen.
So let's give it a go.
I'm going to look for my sarcy directory.
And inside there I'll make a new file called spinner.
J.S. I'm calling this spinner simply because this thing kind of spins right here you could call it a
loader whatever you want it to be.
I'm just going to call it a spin.
I think that's a reasonable name for that component.
So then inside of your I went to import re-act from react.
I'll make my spinner functional component
and for right now I'll put in all the elements right here that are required to get this thing to show
up on the screen.
So I'm going to have not the you segment we don't actually need that for what you and I are doing.
All we need is the day for the class name UI active dimmer and then this loading thing inside of it.
So I'm going to put a div with a class name of UI active dimmer and inside of it.
I'll put another day with that class name of UI.
Big text loader like so.
And then inside there I'll put some text like loading right now.
And then at the bottom the file finally I'll put my export default spinner to make sure that this component
is available in other locations inside my project.
So now we've got every useable spinner that we can use in many locations and if we even start a new
project in the future we could easily come and just copy paste this thing and use it in a new project.
So that's a benefit to trying to make new components as opposed to just stuffing more GSX into your
existing components.
Sudden going to now flip back over to my index file.
I'm going to import spinner from spinner at the top and then I'll make use of that spinner inside of
my render method.
So rather than the hardcoded loading right here I'm going to replace that thing with a spinner.
All right so let's now save this.
We'll flip back over to the browser and see how it looks.
Perfect's.
That is so much better than what we had before.
So now it is way more clear to our user that we are waiting on something before we can show them any
content.
When we then click on allow or block right here it actually resolves to some interesting screen.
And the nature of the relationship between these two screens is way more clear than what we had before.
I would argue that before when he had that like tiny little loading text on the top left hand side.
And then we eventually resolved it to this big orange screen that would probably be a very jarring experience
for the user.
But showing that loading page which is a full screen darkening like this kind of makes that big transition
a little bit less abrupt OK.
So it looks pretty good.
Now one last thing I want to mention here you'll notice that our text right here is hard coded to say
loading.
Now that's just a tad bit unclear to our user.
We say loading the user might think oh like they're loading something like that making a network request
or they're fetching some data and it's not really clear that in fact we are waiting for the user to
either allow or block or location requests.
I think the the last thing we need to do is somehow have the ability to customize our spinner and change
the message that it shows because in this case I want to show something more like a police selector
Please allow us to reach your location and then it would be more clear to the user that oh I need to
do something before this page is going to actually load up.
So let's come back to the next section.
We're going to start to customize our spinner component just a little bit to make sure that we can show
some different text inside of your besides loading.