1 00:00:00,770 --> 00:00:05,180 We've now got some styling on our application and it's looking pretty good but there's just one thing 2 00:00:05,180 --> 00:00:06,740 that's kind of awkward about it. 3 00:00:06,770 --> 00:00:12,920 Remember as I'm refreshing the page my location is instantly detected because I have done an override 4 00:00:12,950 --> 00:00:14,220 on my geolocation. 5 00:00:14,420 --> 00:00:19,910 What we need to think about the first time user experience like the first time a user loads up our app 6 00:00:20,060 --> 00:00:23,300 and they might be sitting there waiting for the location to be detected. 7 00:00:23,450 --> 00:00:28,550 And while they're waiting for that well this page might not quite look so pretty. 8 00:00:28,850 --> 00:00:30,090 Let me show you what I mean. 9 00:00:30,380 --> 00:00:37,070 I'm going to go ahead and reset my location preferences right here and then I'll refresh the page just 10 00:00:37,070 --> 00:00:41,300 as before when the page is first loading up and we're waiting to get our geolocation. 11 00:00:41,300 --> 00:00:46,280 We see this very white background with this kind of ugly text up here that just says Loading. 12 00:00:46,280 --> 00:00:47,870 When I finally click allow. 13 00:00:47,960 --> 00:00:50,270 Well then it turns into something kind of nice. 14 00:00:50,270 --> 00:00:54,980 So I think that in order to make this page a little bit more user friendly that is right now we should 15 00:00:55,070 --> 00:00:58,650 really try to get some type of better interface here. 16 00:00:58,760 --> 00:01:01,100 When the page is still loading up. 17 00:01:01,300 --> 00:01:03,910 So let's kind of brainstorm here a little bit. 18 00:01:03,910 --> 00:01:07,850 I want you to flip over if you saw this open to the semantic UI documentation. 19 00:01:08,020 --> 00:01:15,780 And then once inside if you're going to look on the left hand menu I know when to go down to loader 20 00:01:15,870 --> 00:01:24,090 right here underneath the elements section so on the loader we can put essentially a nice spinning icon 21 00:01:24,150 --> 00:01:29,070 with a black background and some text to tell the user that hey we're like trying to do something here. 22 00:01:29,900 --> 00:01:35,180 I think that doing a full screen loading animation like this would be a lot more appropriate than just 23 00:01:35,180 --> 00:01:41,020 showing that while loading techs up there while we wait for the approval to get the user's location. 24 00:01:41,030 --> 00:01:44,860 So let's try putting this together now before writing any code for this. 25 00:01:44,900 --> 00:01:51,080 I want you to think about where we're going to place this spinner thing inside of our application really 26 00:01:51,080 --> 00:01:54,020 quickly if you want to you can click on that little code icon right there. 27 00:01:54,020 --> 00:01:59,830 It'll show you the h each female or her case GSX that we have to write out to get that effect. 28 00:02:01,110 --> 00:02:07,380 Without a doubt if we want to stick that into our render method of our app component it would mean that 29 00:02:07,380 --> 00:02:12,170 we would not be able to reuse that spinner in other locations inside of our location. 30 00:02:12,180 --> 00:02:17,280 Now at this point our app is pretty simple very straightforward but when ever we're putting together 31 00:02:17,310 --> 00:02:23,680 re-act application as much as possible we want to try at least try to make reusable components. 32 00:02:23,700 --> 00:02:30,700 So all I'm trying to say here is that I think that rather than just sticking in some Rajya sex right 33 00:02:30,700 --> 00:02:36,160 here for when we are in the case of looting I think that we should instead create a separate component 34 00:02:36,700 --> 00:02:41,010 whose sole purpose will be to show a spinner like this on the screen. 35 00:02:41,250 --> 00:02:42,460 So let's give it a go. 36 00:02:42,850 --> 00:02:45,080 I'm going to look for my sarcy directory. 37 00:02:45,250 --> 00:02:50,140 And inside there I'll make a new file called spinner. 38 00:02:50,270 --> 00:02:54,710 J.S. I'm calling this spinner simply because this thing kind of spins right here you could call it a 39 00:02:54,710 --> 00:02:56,960 loader whatever you want it to be. 40 00:02:56,960 --> 00:02:58,070 I'm just going to call it a spin. 41 00:02:58,070 --> 00:03:00,210 I think that's a reasonable name for that component. 42 00:03:00,560 --> 00:03:05,220 So then inside of your I went to import re-act from react. 43 00:03:05,390 --> 00:03:07,550 I'll make my spinner functional component 44 00:03:11,980 --> 00:03:17,440 and for right now I'll put in all the elements right here that are required to get this thing to show 45 00:03:17,440 --> 00:03:18,340 up on the screen. 46 00:03:18,580 --> 00:03:23,680 So I'm going to have not the you segment we don't actually need that for what you and I are doing. 47 00:03:23,680 --> 00:03:30,100 All we need is the day for the class name UI active dimmer and then this loading thing inside of it. 48 00:03:30,100 --> 00:03:37,200 So I'm going to put a div with a class name of UI active dimmer and inside of it. 49 00:03:37,220 --> 00:03:40,670 I'll put another day with that class name of UI. 50 00:03:41,000 --> 00:03:44,110 Big text loader like so. 51 00:03:44,420 --> 00:03:48,590 And then inside there I'll put some text like loading right now. 52 00:03:48,780 --> 00:03:53,560 And then at the bottom the file finally I'll put my export default spinner to make sure that this component 53 00:03:53,560 --> 00:03:56,480 is available in other locations inside my project. 54 00:03:57,380 --> 00:04:01,910 So now we've got every useable spinner that we can use in many locations and if we even start a new 55 00:04:01,910 --> 00:04:07,200 project in the future we could easily come and just copy paste this thing and use it in a new project. 56 00:04:07,220 --> 00:04:12,680 So that's a benefit to trying to make new components as opposed to just stuffing more GSX into your 57 00:04:12,680 --> 00:04:14,020 existing components. 58 00:04:14,910 --> 00:04:17,760 Sudden going to now flip back over to my index file. 59 00:04:18,930 --> 00:04:25,560 I'm going to import spinner from spinner at the top and then I'll make use of that spinner inside of 60 00:04:25,560 --> 00:04:26,890 my render method. 61 00:04:27,200 --> 00:04:37,130 So rather than the hardcoded loading right here I'm going to replace that thing with a spinner. 62 00:04:37,150 --> 00:04:38,540 All right so let's now save this. 63 00:04:38,560 --> 00:04:41,090 We'll flip back over to the browser and see how it looks. 64 00:04:42,090 --> 00:04:42,860 Perfect's. 65 00:04:42,890 --> 00:04:45,240 That is so much better than what we had before. 66 00:04:45,290 --> 00:04:50,660 So now it is way more clear to our user that we are waiting on something before we can show them any 67 00:04:50,660 --> 00:04:51,780 content. 68 00:04:51,800 --> 00:04:56,940 When we then click on allow or block right here it actually resolves to some interesting screen. 69 00:04:57,230 --> 00:05:02,060 And the nature of the relationship between these two screens is way more clear than what we had before. 70 00:05:02,060 --> 00:05:07,130 I would argue that before when he had that like tiny little loading text on the top left hand side. 71 00:05:07,220 --> 00:05:11,810 And then we eventually resolved it to this big orange screen that would probably be a very jarring experience 72 00:05:11,810 --> 00:05:12,740 for the user. 73 00:05:13,550 --> 00:05:20,420 But showing that loading page which is a full screen darkening like this kind of makes that big transition 74 00:05:20,450 --> 00:05:24,130 a little bit less abrupt OK. 75 00:05:24,130 --> 00:05:25,480 So it looks pretty good. 76 00:05:25,600 --> 00:05:32,400 Now one last thing I want to mention here you'll notice that our text right here is hard coded to say 77 00:05:32,460 --> 00:05:33,390 loading. 78 00:05:33,390 --> 00:05:36,750 Now that's just a tad bit unclear to our user. 79 00:05:36,810 --> 00:05:42,360 We say loading the user might think oh like they're loading something like that making a network request 80 00:05:42,360 --> 00:05:47,190 or they're fetching some data and it's not really clear that in fact we are waiting for the user to 81 00:05:47,220 --> 00:05:50,600 either allow or block or location requests. 82 00:05:50,700 --> 00:05:55,890 I think the the last thing we need to do is somehow have the ability to customize our spinner and change 83 00:05:55,890 --> 00:06:02,070 the message that it shows because in this case I want to show something more like a police selector 84 00:06:02,070 --> 00:06:06,930 Please allow us to reach your location and then it would be more clear to the user that oh I need to 85 00:06:06,930 --> 00:06:10,390 do something before this page is going to actually load up. 86 00:06:10,410 --> 00:06:11,740 So let's come back to the next section. 87 00:06:11,760 --> 00:06:16,050 We're going to start to customize our spinner component just a little bit to make sure that we can show 88 00:06:16,050 --> 00:06:18,570 some different text inside of your besides loading.