1 00:00:01,700 --> 00:00:05,930 So now we're having all the functionalities in an app, we are able to get the data from the API and 2 00:00:05,930 --> 00:00:06,770 we are displaying it. 3 00:00:07,130 --> 00:00:10,010 The one piece of code that remains is to add the loading screen. 4 00:00:10,220 --> 00:00:13,310 For example, if I just feel refresh now, we will. 5 00:00:13,340 --> 00:00:15,410 We won't be seeing that loading screen with a spinner. 6 00:00:15,710 --> 00:00:17,750 And we want that functionality in an app. 7 00:00:17,960 --> 00:00:20,750 And later on after this, we will be adding spaces in our application. 8 00:00:21,200 --> 00:00:26,150 So let's just head back to our core data and we'll be adding a spinner into our application. 9 00:00:26,450 --> 00:00:28,490 So for that purpose, just head back. 10 00:00:29,180 --> 00:00:34,520 By the way, if you was just here, I may just be having a spinner GIF, which we need to show on screen. 11 00:00:34,970 --> 00:00:41,210 So this is the year that will be loading when we'll have an application is waiting for the data to be 12 00:00:41,210 --> 00:00:41,660 fetch. 13 00:00:42,140 --> 00:00:43,100 So this is the application. 14 00:00:43,190 --> 00:00:44,660 This is the spinner that will read this thing. 15 00:00:45,170 --> 00:00:47,930 So it just closed off all the taps. 16 00:00:50,230 --> 00:00:55,990 And in the components world, I will be creating a new folder with the name spinner new file. 17 00:00:56,650 --> 00:00:59,920 So let's just name it spinner logistics. 18 00:01:01,630 --> 00:01:04,060 Now, this GSX would be using a spin as. 19 00:01:04,780 --> 00:01:07,090 So let's just created, let's import Jack. 20 00:01:08,550 --> 00:01:12,450 And then the Jeff spinner, so they'll be importing it by that name only. 21 00:01:14,010 --> 00:01:14,840 No, this is in. 22 00:01:16,560 --> 00:01:18,690 Those inside the images. 23 00:01:21,730 --> 00:01:23,590 And inside the images we have, spinner. 24 00:01:26,160 --> 00:01:33,990 Yeah, so my coordinator loaded it now after this, but what we do is that will be creating a functional 25 00:01:33,990 --> 00:01:34,530 component. 26 00:01:35,130 --> 00:01:36,810 So let's just create a spinner. 27 00:01:44,150 --> 00:01:45,950 Now, really putting a written statement. 28 00:01:49,210 --> 00:01:54,250 Now inside the inside, this written statement will be having an image element and will give it a source 29 00:01:54,250 --> 00:01:54,850 of spinner. 30 00:01:58,110 --> 00:02:02,520 So we're having our source and we'll give it an alternative name, perhaps loading. 31 00:02:04,240 --> 00:02:10,240 And this, too, would be the victim of inland styling, so let's just style it in line. 32 00:02:11,590 --> 00:02:15,280 OK, so we'll be giving it veto. 33 00:02:20,080 --> 00:02:20,590 About. 34 00:02:22,440 --> 00:02:26,310 Two hundred pixels and after them, which will also give it a margin auto. 35 00:02:35,520 --> 00:02:41,250 OK, so we have given it with a little be of margin and after the margin will also give it a display 36 00:02:41,250 --> 00:02:41,820 of block. 37 00:02:47,620 --> 00:02:48,460 Narrative. 38 00:02:50,010 --> 00:02:53,760 Now what we need to add to it, OK, we are going to close it. 39 00:02:54,420 --> 00:02:56,380 OK, guess I have closed much. 40 00:02:56,760 --> 00:02:59,070 Now we need to export our component back. 41 00:02:59,070 --> 00:03:00,300 So export default. 42 00:03:03,800 --> 00:03:04,370 Spinner. 43 00:03:07,690 --> 00:03:12,070 Now hit save and close this banana and move into Abdul Jaspal. 44 00:03:13,420 --> 00:03:20,050 Now we need to conditionally rendered the example, we only want a screen to appear when our data is 45 00:03:20,050 --> 00:03:20,800 in loading fees. 46 00:03:20,830 --> 00:03:26,080 That means when the loading suit is true and the loading system was set to false when it is loaded, 47 00:03:26,080 --> 00:03:26,350 right? 48 00:03:26,800 --> 00:03:32,200 So head to your character's list component and will be surrounding it and collaborators. 49 00:03:33,270 --> 00:03:35,490 Now what we want is that. 50 00:03:37,200 --> 00:03:38,670 OK, I just got it. 51 00:03:40,320 --> 00:03:43,950 And what they want is that if loading cathedral. 52 00:03:45,510 --> 00:03:50,610 If learning is true, then I want to show there's been a screen. 53 00:03:52,410 --> 00:03:54,470 So then I want to show this screen. 54 00:03:56,400 --> 00:04:01,590 And if not, if loading is false, then I want to show our catalyst. 55 00:04:02,580 --> 00:04:04,250 Now we are yet to import Espinosa. 56 00:04:04,260 --> 00:04:05,790 Let's just import offspinner first. 57 00:04:13,410 --> 00:04:15,060 This story stories in confidence. 58 00:04:19,420 --> 00:04:20,270 OK, it's here. 59 00:04:21,010 --> 00:04:27,310 So now we see that floating is equal to true, then you want to call and spinner and if not, then we 60 00:04:27,310 --> 00:04:28,540 want to call in a catalyst. 61 00:04:28,900 --> 00:04:30,670 And we still see that is OK. 62 00:04:30,920 --> 00:04:31,660 Just remove this. 63 00:04:31,990 --> 00:04:32,350 And he'd. 64 00:04:33,640 --> 00:04:35,410 So now if we just take a look at that application. 65 00:04:42,000 --> 00:04:48,330 OK, so we are unable to resolve our spinners or move back into your co-director and inside the spinner 66 00:04:48,330 --> 00:04:48,660 file. 67 00:04:51,490 --> 00:04:52,650 Spin, Roger Sex. 68 00:04:53,440 --> 00:04:58,390 So it says that we are unable to resolve spinner Soviet in search bar. 69 00:05:00,780 --> 00:05:05,460 OK, concerns at this point about an Ebola reservoir spinner, so let's just reimported, maybe, I 70 00:05:05,460 --> 00:05:06,750 guess there was a wrong address. 71 00:05:09,220 --> 00:05:15,190 And that the images we want to spend on Roger, I would say, you know, that's we're application again. 72 00:05:21,380 --> 00:05:25,760 OK, so we see that we are having a spin up to the point of time that we are anywhere, we are able 73 00:05:25,760 --> 00:05:27,710 to load the images as well as the data. 74 00:05:28,610 --> 00:05:30,320 So this work, this looks good. 75 00:05:30,410 --> 00:05:35,690 Now, the only way stated that the code that we need to write is to make it more beautiful. 76 00:05:35,750 --> 00:05:36,920 So that's what we'll be doing.