1 00:00:00,240 --> 00:00:00,870 Awesome job. 2 00:00:01,110 --> 00:00:03,060 Our initial functionality works. 3 00:00:03,480 --> 00:00:05,070 We can get the user. 4 00:00:05,640 --> 00:00:07,860 Now, we haven't covered followers in repose yet. 5 00:00:07,890 --> 00:00:08,310 Don't worry. 6 00:00:08,830 --> 00:00:09,960 We're going to get there. 7 00:00:10,500 --> 00:00:18,420 But before we do that, I would want to implement some kind of state of loading, because eventually, 8 00:00:18,930 --> 00:00:24,780 once we start reaching the followers and reports and all that is just gonna take a little bit longer 9 00:00:25,320 --> 00:00:26,430 for the user. 10 00:00:26,460 --> 00:00:28,140 I mean, it was there and then. 11 00:00:28,170 --> 00:00:33,150 But once you start getting all of the info, I mean, it just takes a little bit of time. 12 00:00:33,630 --> 00:00:41,100 So even if the users really come back fast, I mean, it would benefit us if we were to have some kind 13 00:00:41,100 --> 00:00:42,630 of state of loading. 14 00:00:42,960 --> 00:00:43,350 Correct. 15 00:00:43,770 --> 00:00:48,510 Now, it was my preference to set up the lowering below the search bar. 16 00:00:48,930 --> 00:00:55,590 So when I'm loading the user, I just have the lowering component displayed below here. 17 00:00:55,920 --> 00:01:00,210 I'm still displaying the search as well as the number. 18 00:01:00,680 --> 00:01:02,040 Now, that's up to you. 19 00:01:02,180 --> 00:01:08,670 If you'd want to have a state of loading were essentially you hide everything like we have when we load 20 00:01:08,670 --> 00:01:14,520 the application, when we're collecting we the off zero and all that, that's up to you. 21 00:01:14,540 --> 00:01:15,570 You can definitely do that. 22 00:01:15,840 --> 00:01:17,750 So in my case, I have two states of loading. 23 00:01:18,130 --> 00:01:21,120 One where I'm dealing with authentication. 24 00:01:21,570 --> 00:01:24,390 And then the second one where I'm looking for the user. 25 00:01:24,780 --> 00:01:28,740 So when I search for to get our user, you'll see that the loading is displayed out here. 26 00:01:28,950 --> 00:01:31,520 So everything here is shown. 27 00:01:31,910 --> 00:01:32,180 OK. 28 00:01:32,340 --> 00:01:33,350 That is my preference. 29 00:01:33,360 --> 00:01:35,580 Of course, if you want to change around, you can definitely do that. 30 00:01:35,610 --> 00:01:39,780 But I just hope that it's still important to show the search bar. 31 00:01:40,110 --> 00:01:40,770 I don't know why. 32 00:01:41,190 --> 00:01:43,710 I just thought that that would make a little bit more sense. 33 00:01:44,190 --> 00:01:50,100 So what I'm trying to say is that we're gonna go back to our application and for the time being, we're 34 00:01:50,100 --> 00:01:52,890 just gonna change state of loading to true. 35 00:01:54,110 --> 00:01:57,890 Of course, eventually we'll do that programmatically from our search user. 36 00:01:58,270 --> 00:02:02,160 What forten timing is just going to be set the true by default. 37 00:02:02,790 --> 00:02:03,710 And once we do that. 38 00:02:03,800 --> 00:02:07,370 And now I'd want to go back to a dashboard. 39 00:02:07,730 --> 00:02:09,220 So that's my main component. 40 00:02:09,830 --> 00:02:13,190 And I would want to get from that dashboard. 41 00:02:13,700 --> 00:02:15,410 I want to get that ease loading. 42 00:02:15,560 --> 00:02:19,010 Now, first, of course, I would need to pass it in show loading. 43 00:02:20,200 --> 00:02:22,000 And be let's do is loading. 44 00:02:22,070 --> 00:02:24,810 So is loading on line. 45 00:02:24,980 --> 00:02:27,160 The function is set, is loading. 46 00:02:27,920 --> 00:02:30,380 Let's scroll down right after. 47 00:02:30,380 --> 00:02:31,160 Get every user. 48 00:02:31,620 --> 00:02:33,740 We're gonna say is loading. 49 00:02:34,240 --> 00:02:34,970 Hey, beautiful. 50 00:02:35,500 --> 00:02:42,500 And then in the dashboard I would want to pull it out and we can do that while of course we simply go 51 00:02:42,500 --> 00:02:43,250 with concert. 52 00:02:43,490 --> 00:02:45,620 Then I'm looking for ease loading. 53 00:02:46,160 --> 00:02:47,830 Then that is coming from react. 54 00:02:48,470 --> 00:02:50,180 And use context, of course. 55 00:02:50,570 --> 00:02:53,210 And then we're looking for the get up context. 56 00:02:54,110 --> 00:03:01,520 And then if that is the case, if I'm loading, then I would want to display my dashboard a little bit 57 00:03:01,520 --> 00:03:02,060 differently. 58 00:03:02,630 --> 00:03:04,190 So I'll have two returns. 59 00:03:04,670 --> 00:03:08,650 I'll have one when I'm not loading on. 60 00:03:08,870 --> 00:03:13,790 The other one if, of course, I'm loading the user to repose on the followers. 61 00:03:14,210 --> 00:03:21,250 So any armor say if is loading, if it is true, then I would want to return main. 62 00:03:21,650 --> 00:03:23,400 So I'm still gonna go with mine. 63 00:03:23,560 --> 00:03:27,250 However, in the main, I'm just gonna to turn a nav bar here. 64 00:03:28,530 --> 00:03:31,360 I'm just going to turn a search on. 65 00:03:31,810 --> 00:03:34,680 I'm also going to return my loading component. 66 00:03:35,160 --> 00:03:36,420 So how is that going to look like? 67 00:03:36,460 --> 00:03:41,000 Well, it's simply going to be a image with a source. 68 00:03:41,340 --> 00:03:44,070 And by the way, the loading, Jeff, is right here. 69 00:03:44,460 --> 00:03:47,160 So if you take a look at the images and preload or you'll find the drift. 70 00:03:47,630 --> 00:03:55,310 So I'll set my images source to loading that image, because that is, of course, the name that I gave. 71 00:03:55,820 --> 00:04:00,330 And land, let's add a class name and then we're gonna go with loading. 72 00:04:00,930 --> 00:04:02,250 And then I M.G.. 73 00:04:03,130 --> 00:04:05,630 And of course, we can do alternative. 74 00:04:06,300 --> 00:04:07,860 And we're gonna go with a loading. 75 00:04:08,440 --> 00:04:10,650 Let's close out our image. 76 00:04:11,010 --> 00:04:12,420 And since it is true. 77 00:04:13,050 --> 00:04:14,700 Now, of course, you can clearly see that. 78 00:04:15,060 --> 00:04:15,390 Correct. 79 00:04:15,740 --> 00:04:19,470 So let me navigate back and you'll see that this is my loading. 80 00:04:19,920 --> 00:04:25,440 So that's what I would want to show while I'm getting the user info again. 81 00:04:25,680 --> 00:04:31,290 If it is your preference to remove the search, you can definitely do that as well. 82 00:04:31,830 --> 00:04:32,640 It wasn't mine. 83 00:04:34,140 --> 00:04:35,430 That's really your preference. 84 00:04:35,790 --> 00:04:36,660 So let me go back. 85 00:04:37,470 --> 00:04:40,380 I'm gonna go back to search because I like to keep my search. 86 00:04:40,860 --> 00:04:47,040 Now, one thing that I would that I'd want to add is our want to hide the button, no inner search. 87 00:04:47,430 --> 00:04:52,650 So I'm going to go back to search and we're going to take a look at is loading. 88 00:04:52,710 --> 00:04:55,320 So we're getting that from the get up context. 89 00:04:55,890 --> 00:04:57,300 And let's keep on scrolling. 90 00:04:57,310 --> 00:04:58,260 Let's keep on scrolling. 91 00:04:58,620 --> 00:05:04,980 Notice here where I have requests are bigger than zero that I'm showing the button. 92 00:05:05,250 --> 00:05:05,610 Correct. 93 00:05:06,030 --> 00:05:08,790 So now we would probably want to change this around. 94 00:05:09,050 --> 00:05:19,140 But where I would want to say, if the user is bigger than zero and I'm not loading, then I would one 95 00:05:19,140 --> 00:05:19,590 display. 96 00:05:19,710 --> 00:05:20,060 Correct. 97 00:05:20,490 --> 00:05:21,850 So I'm going to go with. 98 00:05:21,990 --> 00:05:28,080 If requests are bigger than zero and then is loading is not true. 99 00:05:28,620 --> 00:05:34,170 So I just need to sit here like this and then I'm gonna say that I'm displaying the button. 100 00:05:34,610 --> 00:05:39,780 And once I add one more and operator, of course everything works when I'm loading. 101 00:05:40,470 --> 00:05:43,890 The user cannot just keep on typing and getting more users. 102 00:05:44,190 --> 00:05:45,360 So that's our functionality. 103 00:05:45,420 --> 00:05:52,140 Now, let's head back to a context and then, of course, we'll set it back to falls for the time being. 104 00:05:52,710 --> 00:05:55,260 We're going to say here, false like so. 105 00:05:55,260 --> 00:05:58,050 So loading is not going to be by default. 106 00:05:58,680 --> 00:06:04,700 And of course, I would want to implement it when I start fetching for the user. 107 00:06:04,710 --> 00:06:05,040 Correct. 108 00:06:05,430 --> 00:06:06,570 So remember set loading. 109 00:06:06,870 --> 00:06:08,640 We're going to uncommented right now. 110 00:06:08,970 --> 00:06:10,620 So we have set loading to true. 111 00:06:11,030 --> 00:06:13,410 Then we're getting all the data and everything. 112 00:06:13,890 --> 00:06:21,030 And now, of course, the last thing that I would want out or here is to hide loading once I'm done 113 00:06:21,210 --> 00:06:27,360 with my request as well as check requests, because I would want to right away display how many requests 114 00:06:27,390 --> 00:06:27,780 I have. 115 00:06:28,170 --> 00:06:29,790 So I'm going to go check requests. 116 00:06:29,880 --> 00:06:30,960 I'm going to invoke it. 117 00:06:31,340 --> 00:06:31,970 Anonymous. 118 00:06:32,040 --> 00:06:32,280 Set. 119 00:06:32,490 --> 00:06:32,980 Set. 120 00:06:33,530 --> 00:06:34,590 Is loading. 121 00:06:35,160 --> 00:06:37,020 And that is, of course, gonna be false. 122 00:06:37,500 --> 00:06:43,610 So now when I'm searching for user and of course it says, oh, here set is loading is not true. 123 00:06:43,760 --> 00:06:44,260 Let's say. 124 00:06:44,910 --> 00:06:48,660 And the reason why it's doing that is because, of course, in here it's not set loading. 125 00:06:49,160 --> 00:06:51,990 It is set is loading my bad. 126 00:06:52,110 --> 00:06:54,030 Now by default, it is not loading. 127 00:06:54,420 --> 00:06:56,400 That's why we cannot see the spinner. 128 00:06:56,850 --> 00:07:02,380 But if I navigate back and then if we start searching for the users, we're gonna go with the worst 129 00:07:02,400 --> 00:07:03,140 BOSBACH. 130 00:07:03,810 --> 00:07:09,790 And then of course, we saw a little bit of loading and now we saw the repos and all that. 131 00:07:10,410 --> 00:07:14,490 So we successfully implemented the loading spinner as well. 132 00:07:14,910 --> 00:07:19,680 So now every time we'll search for the user, we'll have our spinner. 133 00:07:20,130 --> 00:07:25,680 And only when we get our beta back then we will hide these loading spinner.