1 00:00:01,380 --> 00:00:02,100 Welcome back. 2 00:00:02,150 --> 00:00:06,780 In today's lecture, we're going to continue working the search movie view, and the first thing that 3 00:00:06,780 --> 00:00:10,470 we need to do is to clear the input field after we get the results. 4 00:00:10,860 --> 00:00:16,890 And after that, we're going to set the movie Slider because remember the things we're stacking up and 5 00:00:16,890 --> 00:00:19,980 after that, we're going to add a page load. 6 00:00:19,980 --> 00:00:23,940 So I hope everything we will manage to do in one go. 7 00:00:24,180 --> 00:00:28,590 But so I hope now the search movie goes well. 8 00:00:28,590 --> 00:00:38,700 We need to do we need to create another function called CONSED Reset input and what this function will 9 00:00:38,700 --> 00:00:39,270 not take. 10 00:00:39,510 --> 00:00:43,650 Actually I missed equal here will not take any parameters. 11 00:00:43,920 --> 00:00:44,390 Why? 12 00:00:44,400 --> 00:00:51,120 Because we are just setting the class names, so I'm just going to code it, not for input. 13 00:00:51,270 --> 00:00:59,670 Actually this input here that we need here that we have from the class names in this is targeting what 14 00:01:00,000 --> 00:01:03,470 this is targeting the D form. 15 00:01:03,480 --> 00:01:03,740 Right. 16 00:01:04,200 --> 00:01:05,550 Just going to click it here, Inspective. 17 00:01:05,740 --> 00:01:06,390 Here it is. 18 00:01:06,570 --> 00:01:10,720 So I'm getting the class of the input, the text of that input. 19 00:01:10,980 --> 00:01:11,400 Nice. 20 00:01:11,420 --> 00:01:19,450 So what are we going to do in going to see value equal to an empty string that is pretty much here. 21 00:01:19,480 --> 00:01:23,820 Here we grab the value of what we have typed in here. 22 00:01:23,820 --> 00:01:28,650 We are just resetting back to zero, but we need to import this one here. 23 00:01:28,800 --> 00:01:30,690 So where do you think we're going to put it? 24 00:01:30,690 --> 00:01:31,700 In the controller. 25 00:01:32,070 --> 00:01:35,040 So the most logical way is to put it here. 26 00:01:35,220 --> 00:01:48,410 So clear input search and let's use the search view search movie of you that we set input. 27 00:01:48,420 --> 00:01:51,540 Right in that you do a job, probably. 28 00:01:52,380 --> 00:01:53,160 Let's test this out. 29 00:01:53,160 --> 00:01:57,780 So I'm just going to refresh you're going to go to the council and I'm going to get rid of this. 30 00:01:58,260 --> 00:02:00,360 I don't know things. 31 00:02:00,600 --> 00:02:02,610 So I'm just going to search for Batmen. 32 00:02:03,060 --> 00:02:05,850 And it is it's working for some reason. 33 00:02:05,850 --> 00:02:06,420 It's not working. 34 00:02:06,420 --> 00:02:08,280 Just say that a couple of times. 35 00:02:08,280 --> 00:02:08,970 Refresh it. 36 00:02:08,970 --> 00:02:09,930 Sometimes it's stuck. 37 00:02:09,930 --> 00:02:10,680 It's not working. 38 00:02:10,680 --> 00:02:12,810 Now, that is pretty much it. 39 00:02:12,810 --> 00:02:13,710 Copy this one. 40 00:02:14,040 --> 00:02:15,450 Just put it here. 41 00:02:17,970 --> 00:02:19,530 It's not their. 42 00:02:21,710 --> 00:02:24,810 And make sure that you use semicolon everywhere, right? 43 00:02:25,700 --> 00:02:29,240 Maybe last time I did an edit, but make sure that you add the semicolon. 44 00:02:29,510 --> 00:02:38,150 Now, the second thing is that when I search another for Tarzan and if I click here to read the property 45 00:02:38,150 --> 00:02:38,960 of Forage. 46 00:02:39,860 --> 00:02:41,420 OK, let's see what's happening here. 47 00:02:41,450 --> 00:02:43,310 I'm going to go Tarzan here. 48 00:02:44,150 --> 00:02:54,170 Enter then I will Batman and I'm going to say enter here and try and catch error y because we're getting 49 00:02:54,170 --> 00:02:54,860 too many results. 50 00:02:54,860 --> 00:02:57,380 Probably no idea. 51 00:02:58,940 --> 00:03:00,280 OK, don't worry about this one. 52 00:03:00,290 --> 00:03:01,460 We will, we will fix this one. 53 00:03:01,610 --> 00:03:04,670 So it's in the Gisel 17 here. 54 00:03:05,150 --> 00:03:05,550 Right. 55 00:03:05,570 --> 00:03:07,220 Display movie probably. 56 00:03:07,220 --> 00:03:10,040 We are having some problem over here, but don't worry. 57 00:03:10,050 --> 00:03:18,680 Now the first and second thing that we need to do is to clear the what the movie slider. 58 00:03:18,680 --> 00:03:19,050 Right. 59 00:03:19,070 --> 00:03:20,420 So we need to clean that one. 60 00:03:20,690 --> 00:03:25,640 And that is pretty much same similar to what we have done here. 61 00:03:25,640 --> 00:03:33,620 But because here in the movie Slider, if I click inspect it, I will see that movie slider item. 62 00:03:34,070 --> 00:03:36,250 It's inside the movie Slider. 63 00:03:36,260 --> 00:03:42,650 So what I want this whole thing here is either e-mail, including these div. 64 00:03:42,860 --> 00:03:46,580 I want to be to I mean to get rid of this one. 65 00:03:46,580 --> 00:03:48,520 Right, because we have 10 at the moment. 66 00:03:49,080 --> 00:03:49,370 Right. 67 00:03:49,490 --> 00:03:50,480 So how are we going to do this. 68 00:03:50,660 --> 00:03:52,070 So clear movie Slider. 69 00:03:52,280 --> 00:03:57,250 And we need to get a meaningful name like reset. 70 00:03:59,330 --> 00:04:04,070 So small reset movie slider. 71 00:04:04,280 --> 00:04:10,070 OK, now what we have here in the movie Slider Class names the movie Slider. 72 00:04:10,070 --> 00:04:12,970 We already have that movie Slider here. 73 00:04:13,010 --> 00:04:14,960 No, we don't have it, so we need to add it. 74 00:04:15,470 --> 00:04:21,350 So I'm just going to copy it and I'm going to say, OK, that will be called Movie Slider 75 00:04:23,960 --> 00:04:25,280 and the movie Slider. 76 00:04:25,280 --> 00:04:26,060 The Class. 77 00:04:26,270 --> 00:04:30,890 Actually, I'm just going to grab it from the index and where it is. 78 00:04:32,570 --> 00:04:34,360 I've scrolled too much in the bottom. 79 00:04:35,150 --> 00:04:37,400 Now, the main content here is the movie Slider. 80 00:04:37,610 --> 00:04:38,750 So this is the class name. 81 00:04:38,750 --> 00:04:39,770 Make sure that you copy. 82 00:04:39,980 --> 00:04:43,040 And this is the container for each and every element that we are looping through. 83 00:04:43,400 --> 00:04:43,820 Right. 84 00:04:44,030 --> 00:04:45,560 That will be movie slider. 85 00:04:45,710 --> 00:04:46,280 Nice. 86 00:04:46,700 --> 00:04:48,680 You have that one so I can use it here. 87 00:04:49,250 --> 00:04:52,520 That movie slider in here. 88 00:04:52,520 --> 00:05:00,710 I'm going to set the inner HTML inner HTML back to empty right back to nothing. 89 00:05:00,890 --> 00:05:03,560 So let's save it and see what's happening. 90 00:05:03,770 --> 00:05:09,530 I'm going to zoom back to one hundred if I'm going to get rid of this and I'm going to say Batman. 91 00:05:10,700 --> 00:05:12,470 And now we have the Batman. 92 00:05:12,680 --> 00:05:23,330 If I go to then if I click here, let's wait for a while, but I don't have any results. 93 00:05:23,660 --> 00:05:24,920 Let's inspect this one again. 94 00:05:26,210 --> 00:05:27,500 And I do have. 95 00:05:30,260 --> 00:05:35,660 So about the videos, ladies and gentlemen, I was looking at what will be the year, so it seemed that 96 00:05:35,660 --> 00:05:42,230 we have some problem with this footage here, but I didn't do anything just like it was here with space. 97 00:05:42,230 --> 00:05:46,000 I just delete that space and I just see it. 98 00:05:46,010 --> 00:05:51,230 And what I don't do last time is I've never called it here. 99 00:05:51,260 --> 00:05:51,670 Right. 100 00:05:52,130 --> 00:05:54,910 So after we clear the search input. 101 00:05:55,190 --> 00:05:56,240 So I'm just going to copy it in. 102 00:05:56,510 --> 00:05:57,680 I'm not going to copy actually. 103 00:05:57,950 --> 00:06:00,130 I'm just going up here with displaying it. 104 00:06:00,560 --> 00:06:06,640 But now we can just clear the movie Slider as well. 105 00:06:07,010 --> 00:06:11,560 So we need to clear that one before we loading the other data. 106 00:06:11,810 --> 00:06:12,210 Right. 107 00:06:12,500 --> 00:06:23,690 So I'm just going to do it like this and I'm going to see a clear movie, slider and Search, Search 108 00:06:23,690 --> 00:06:27,410 Movie View, Dot, Reset movie slider. 109 00:06:27,710 --> 00:06:29,000 And that should do its job. 110 00:06:29,250 --> 00:06:30,730 OK, let's save it. 111 00:06:31,370 --> 00:06:37,880 I hope we're not going to get any more errors and I'm going to go back to 100. 112 00:06:38,300 --> 00:06:41,810 So I'm going to say Batman here, the search. 113 00:06:41,810 --> 00:06:43,310 I do have these four results. 114 00:06:43,310 --> 00:06:45,050 Actually, I do have ten results. 115 00:06:45,530 --> 00:06:50,840 Now, the the good thing is that the search for the input is gone. 116 00:06:50,840 --> 00:06:54,080 But let's see if I do thaat. 117 00:06:54,350 --> 00:06:58,730 If I do Superman, it will just get rid of this one. 118 00:06:58,940 --> 00:07:03,290 If it is that's working, we don't have any errors right now. 119 00:07:03,290 --> 00:07:06,260 Let's we have ten results. 120 00:07:06,500 --> 00:07:07,970 Let's move for Tarzan. 121 00:07:10,550 --> 00:07:13,490 Every is everything is pretty much working now. 122 00:07:13,490 --> 00:07:15,050 I didn't do any much of that one. 123 00:07:15,050 --> 00:07:17,210 I just it was like this here. 124 00:07:17,360 --> 00:07:19,340 I just change it pretty much. 125 00:07:19,640 --> 00:07:25,010 That was sometimes when we're dealing with appx, you're going to run into problems because the FBI 126 00:07:25,010 --> 00:07:25,310 will. 127 00:07:25,520 --> 00:07:27,800 Yeah, sometimes it can happen. 128 00:07:27,800 --> 00:07:33,590 Right now, that is pretty much it for this work of resetting things. 129 00:07:33,590 --> 00:07:36,410 Now we need to do their last part, the page reloads. 130 00:07:36,410 --> 00:07:38,900 So what are we going to do here? 131 00:07:39,530 --> 00:07:45,020 I want to implement the Law Order and we can include either search for you or we can include. 132 00:07:45,890 --> 00:07:49,370 So we can include that page loader here in the search for you. 133 00:07:49,370 --> 00:07:50,240 But I'm not going to do it. 134 00:07:50,480 --> 00:07:55,370 I'm just going to create I'm just going to use it in the class electorate here. 135 00:07:55,880 --> 00:07:56,510 I'm just going to use that. 136 00:07:56,510 --> 00:08:04,340 We can create additional file, but I choose to create it here because we can in future reuse this loader. 137 00:08:04,340 --> 00:08:11,750 For example, when you click on I'm going to show you when you click on this here, you can also include 138 00:08:11,750 --> 00:08:12,340 the loader. 139 00:08:12,350 --> 00:08:16,310 When you click on the likes Autocar Loader, you can click on something else. 140 00:08:16,580 --> 00:08:20,360 The loader will be there, but that isn't what not. 141 00:08:20,360 --> 00:08:22,340 I'm not going to do that in discourse. 142 00:08:22,610 --> 00:08:25,130 But you can do it and you can reuse it. 143 00:08:25,130 --> 00:08:31,040 So everything that we are reusing, you could put in this class selector file. 144 00:08:31,340 --> 00:08:33,510 OK, now enough of the talking. 145 00:08:33,510 --> 00:08:38,930 So we need to create here function and function again. 146 00:08:38,930 --> 00:08:40,730 We need to export it here. 147 00:08:40,730 --> 00:08:41,840 Put a semicolon. 148 00:08:41,990 --> 00:08:44,510 So explored const loader. 149 00:08:44,810 --> 00:08:49,130 So that's the name of the function and it will take one parameter. 150 00:08:49,130 --> 00:08:49,880 Call the parent. 151 00:08:50,270 --> 00:08:56,630 So the parent will be actually now this will come from the index actually in the index. 152 00:08:56,630 --> 00:08:57,560 I'm just gonna show you. 153 00:08:58,160 --> 00:09:01,310 So if you search a load loader, here it is. 154 00:09:01,850 --> 00:09:07,670 So we, it's commented at the moment because if I come and comment this one, it will start spinning 155 00:09:07,670 --> 00:09:08,060 here. 156 00:09:08,300 --> 00:09:09,170 You want to see this? 157 00:09:10,310 --> 00:09:10,940 Save it. 158 00:09:11,210 --> 00:09:13,610 Here is that's the loader I do have. 159 00:09:13,820 --> 00:09:20,540 And it's spinning because in the distribution folder we have the cases and we do have the styles. 160 00:09:20,720 --> 00:09:22,760 And if you look for the lower class. 161 00:09:23,240 --> 00:09:24,500 Yeah, lower class. 162 00:09:24,500 --> 00:09:26,540 We I have styled the loader here. 163 00:09:26,840 --> 00:09:28,060 The background is black. 164 00:09:28,070 --> 00:09:29,030 You release the background. 165 00:09:29,330 --> 00:09:30,500 This is the icon. 166 00:09:30,770 --> 00:09:33,650 The icon is the width seventy five and seventy five. 167 00:09:33,980 --> 00:09:36,500 And it's calling this spin function. 168 00:09:36,770 --> 00:09:38,930 Actually this is speed animation. 169 00:09:39,140 --> 00:09:45,650 So if you don't know about keyframes in my other courses I do explain about that, but that's not the 170 00:09:45,650 --> 00:09:46,550 goal for this course. 171 00:09:46,820 --> 00:09:48,830 So this is actually setting finished. 172 00:09:49,080 --> 00:09:50,330 That's why it's looping over there. 173 00:09:50,330 --> 00:09:54,050 So that's why it's commented in the in here. 174 00:09:54,050 --> 00:09:57,140 So I'm going to copy it and I'm just going to comment it back. 175 00:09:57,140 --> 00:10:00,590 No, I need this parent. 176 00:10:01,640 --> 00:10:12,170 Where was I need this parent here because I want to send the loader on the parent of these HD, Heather. 177 00:10:12,320 --> 00:10:18,680 I want to send the loader on the heather and I want the loader to be attached there so the parent will 178 00:10:18,680 --> 00:10:20,660 be exactly there. 179 00:10:20,660 --> 00:10:24,260 So this will this will do a job now. 180 00:10:24,800 --> 00:10:28,940 So how are we going to do it first in the class of. 181 00:10:29,000 --> 00:10:33,390 Victor, I'm going to say const spehn here, I'm going to create a constant spin. 182 00:10:33,740 --> 00:10:39,210 And remember, I just copy the code from before. 183 00:10:39,290 --> 00:10:47,510 So if you haven't copy, you can go here, Loader and copy this stuff until this div and pasted there 184 00:10:47,720 --> 00:10:48,940 and make it. 185 00:10:48,950 --> 00:10:50,700 This doesn't look very nice. 186 00:10:51,270 --> 00:10:51,690 Yeah. 187 00:10:52,100 --> 00:10:57,090 And we can use it like that in one more tab here. 188 00:10:57,110 --> 00:10:58,370 Now looks very good. 189 00:10:58,820 --> 00:11:02,840 OK, so this is actually the loader we need. 190 00:11:02,990 --> 00:11:05,300 Here is the icon, it's SVG icon. 191 00:11:05,600 --> 00:11:09,980 Now let's add the parent class and actually the parent class. 192 00:11:09,980 --> 00:11:17,960 We're going to add it here and I'm going to say parent element and document dot query selector. 193 00:11:17,960 --> 00:11:23,140 And as I told you, I want to put this loader in the top of it Heidi. 194 00:11:23,170 --> 00:11:26,360 Heather, it is in the header, right? 195 00:11:26,900 --> 00:11:28,590 So that will be my parent class. 196 00:11:29,810 --> 00:11:32,000 And if you're confused now, you don't have to. 197 00:11:32,210 --> 00:11:37,170 So this is actually where are we going to attach the loader? 198 00:11:37,570 --> 00:11:38,990 Now, how are we going to do this? 199 00:11:39,230 --> 00:11:50,450 OK, here I'm going to say parent dot insert insert adjacent in why it's not giving me HTML. 200 00:11:51,080 --> 00:11:54,830 It's not giving me the option to how to complete a nordia. 201 00:11:55,210 --> 00:12:00,560 Now this should be after Biggin, right. 202 00:12:01,120 --> 00:12:03,470 This should be after Biggin in here. 203 00:12:03,470 --> 00:12:08,150 We would like to put this spin that the markup that we have. 204 00:12:08,170 --> 00:12:10,130 Oops I didn't copy it. 205 00:12:10,370 --> 00:12:10,760 Sorry. 206 00:12:11,150 --> 00:12:15,830 So after Biggin what this after beginning means it will go here. 207 00:12:16,490 --> 00:12:18,440 This is before beginning before together. 208 00:12:18,620 --> 00:12:20,800 But we don't want to be hopeful together. 209 00:12:20,960 --> 00:12:24,170 We just want to imagine that this p e d header. 210 00:12:24,440 --> 00:12:24,830 Right. 211 00:12:25,070 --> 00:12:31,820 And we're going to put it here and that's for I want to put it the loader. 212 00:12:31,820 --> 00:12:32,420 The spinner. 213 00:12:32,430 --> 00:12:32,810 Right. 214 00:12:33,170 --> 00:12:33,960 OK, done. 215 00:12:34,430 --> 00:12:38,840 So what we need else is just to call this function. 216 00:12:38,840 --> 00:12:39,180 Right. 217 00:12:39,590 --> 00:12:43,730 So this will be at the beginning of the H.T. Heather parent element. 218 00:12:44,090 --> 00:12:46,160 OK, let's go back to the index. 219 00:12:46,170 --> 00:12:54,800 So where we want this guy to be placed in the most obvious way, you just put it here before we fetch 220 00:12:54,800 --> 00:13:06,830 the data right now, I'm just going to sit here low loading and pour just the loader in here. 221 00:13:06,830 --> 00:13:09,770 We are we need actually before this. 222 00:13:10,040 --> 00:13:12,050 We need to import it right now here. 223 00:13:12,350 --> 00:13:14,810 You know, I just started with these brackets here. 224 00:13:15,140 --> 00:13:19,850 Then that means that I need to continue adding this here. 225 00:13:19,850 --> 00:13:20,660 GUI right. 226 00:13:20,660 --> 00:13:26,600 Because in the first one, a couple of lectures before I told you that if we have multiple things here, 227 00:13:26,960 --> 00:13:27,340 I did. 228 00:13:27,350 --> 00:13:37,160 I didn't plan to put it here, but I've changed my plan today and that was the best option for me. 229 00:13:37,160 --> 00:13:39,440 Just because you can we use this one. 230 00:13:39,650 --> 00:13:47,120 This is done because of the reusability, but now here we can just solve it with basting that loader 231 00:13:47,150 --> 00:13:47,510 there. 232 00:13:47,510 --> 00:13:48,650 Sorry, I just need that one. 233 00:13:48,920 --> 00:13:50,410 So that's pretty much it. 234 00:13:50,630 --> 00:13:58,580 Or this is a good use case where you can put the star in, as you can see, class elector's and you 235 00:13:58,580 --> 00:14:01,160 can use the class elector's everywhere. 236 00:14:01,310 --> 00:14:01,690 Right. 237 00:14:01,910 --> 00:14:07,730 OK, now I want to use the loader here and inside the loader. 238 00:14:08,030 --> 00:14:11,240 I have the class names and the parent element. 239 00:14:11,420 --> 00:14:11,870 Right. 240 00:14:12,590 --> 00:14:13,520 That's pretty much it. 241 00:14:13,790 --> 00:14:16,370 I want to save it in here. 242 00:14:16,370 --> 00:14:20,210 I will not be able to see anything until I load four. 243 00:14:20,570 --> 00:14:25,290 I think I search for something and it is in. 244 00:14:25,370 --> 00:14:26,960 The thing is that it will never stop. 245 00:14:27,560 --> 00:14:32,750 My it's never stopping is because you can see the data is already there, but this is never stopping 246 00:14:32,750 --> 00:14:37,490 because of that infinite class o infinite here animation. 247 00:14:37,820 --> 00:14:39,920 And it's spinning all the time, rotating. 248 00:14:40,460 --> 00:14:44,480 And actually we just this is simple animation where we just rotate this icon. 249 00:14:44,720 --> 00:14:45,080 Right. 250 00:14:45,230 --> 00:14:50,720 This icon is actually stored in the IMG SVG icons. 251 00:14:50,720 --> 00:14:55,160 And if I search here for a spin, I think so. 252 00:14:55,310 --> 00:14:56,210 Here it is spin. 253 00:14:56,210 --> 00:14:58,700 All this is the one that I use. 254 00:14:59,240 --> 00:14:59,660 Right. 255 00:15:00,290 --> 00:15:01,460 That's a simple icon. 256 00:15:02,570 --> 00:15:05,720 OK, I've told you everything that you need to know now. 257 00:15:06,650 --> 00:15:08,110 We need to stop this loader. 258 00:15:08,120 --> 00:15:08,510 Right. 259 00:15:08,740 --> 00:15:11,720 And we need to stop this law after the data is here. 260 00:15:12,080 --> 00:15:14,650 So we're going to go back to the search movies. 261 00:15:15,080 --> 00:15:15,890 We're going to copy it. 262 00:15:16,040 --> 00:15:22,910 I just want to save time in here, actually, not in the search movies. 263 00:15:23,150 --> 00:15:25,670 See the mistake here? 264 00:15:26,030 --> 00:15:28,880 We will say stop. 265 00:15:29,950 --> 00:15:34,830 Loader here and here, we will say just loader. 266 00:15:35,270 --> 00:15:42,070 OK, so the name, it will be just like that stop loader right in 267 00:15:47,200 --> 00:15:49,300 and it will not take any parameters. 268 00:15:51,100 --> 00:15:55,600 I will just get rid of this port so it will not take any parameters like the parent. 269 00:15:55,960 --> 00:15:57,610 So we don't need the parent here. 270 00:15:57,960 --> 00:16:07,540 Now we can't use the class names here, class names as this one because the loader, it's not there 271 00:16:07,870 --> 00:16:10,200 when we first initially load the page. 272 00:16:10,630 --> 00:16:10,890 Right. 273 00:16:11,140 --> 00:16:12,100 This one was here. 274 00:16:12,100 --> 00:16:13,210 The header was there. 275 00:16:13,390 --> 00:16:15,700 That's why we just can be able to attach the loader. 276 00:16:15,830 --> 00:16:19,450 Everything was there, but not because the movies were not there. 277 00:16:20,470 --> 00:16:25,140 The loader will not be able to to you to be used like this. 278 00:16:25,330 --> 00:16:29,650 So what we need to do, we need to use the document query selector here. 279 00:16:29,890 --> 00:16:35,230 So I'm going to see cost is spinning and now this what it will do. 280 00:16:35,230 --> 00:16:36,820 I will say document oops. 281 00:16:40,300 --> 00:16:51,730 We double in here spinning document dot query selector and here we're going to pass the class for the 282 00:16:51,730 --> 00:16:52,260 loader. 283 00:16:53,350 --> 00:16:53,890 Why. 284 00:16:54,400 --> 00:16:55,750 Because the loader was not there. 285 00:16:55,750 --> 00:17:03,520 So I need to target this class and we can do it with the query select otherwise here we will not be 286 00:17:03,520 --> 00:17:05,380 able to use that class. 287 00:17:05,440 --> 00:17:10,600 OK, now I'm going to check if this is speedy is true. 288 00:17:10,750 --> 00:17:12,840 So this will return true or false. 289 00:17:12,850 --> 00:17:13,160 Right. 290 00:17:13,690 --> 00:17:21,400 So if I can find this class then I want to see is spinning dot parent elements. 291 00:17:21,400 --> 00:17:25,680 I just want to target the parent element now again and remove. 292 00:17:25,960 --> 00:17:34,090 So how we do first we find the parent element, then we remove the child in the child is actually this 293 00:17:34,090 --> 00:17:34,420 guy. 294 00:17:34,510 --> 00:17:38,320 This guy here, the entire loader is spinning. 295 00:17:38,920 --> 00:17:39,340 Right. 296 00:17:39,610 --> 00:17:44,710 So what we did, we find the parent element and then we remove the child and the parent element was 297 00:17:46,000 --> 00:17:47,660 on top DHT. 298 00:17:47,800 --> 00:17:50,530 Where was it here? 299 00:17:50,650 --> 00:17:52,630 And actually the loader will be below. 300 00:17:52,780 --> 00:17:57,580 And we're going to find that child element because we use the query selector. 301 00:17:57,970 --> 00:18:03,760 We have it here in these constants and we can remove it now that we should add it here. 302 00:18:04,660 --> 00:18:07,540 Now, that will go before display the data. 303 00:18:07,810 --> 00:18:08,230 Right. 304 00:18:09,820 --> 00:18:15,700 Because when we have the data, I'm going to say, OK, stop Loader. 305 00:18:15,700 --> 00:18:17,140 And that's what I had done for this lecture. 306 00:18:17,260 --> 00:18:27,520 Ladies and gentlemen, in here, I must say stop Loader and let's see what's going to work or not. 307 00:18:27,520 --> 00:18:34,220 I'm just going to say, I don't know mission and I'm going to enter here. 308 00:18:34,220 --> 00:18:34,960 And here it is. 309 00:18:39,190 --> 00:18:42,700 This actually misspelled it, let's put it Tarzan and here. 310 00:18:45,080 --> 00:18:54,420 And for some reason, it's not working OK yet because here we need to at least stop Lowgar as well. 311 00:18:55,850 --> 00:18:57,890 Oh, actually did it by itself. 312 00:18:59,380 --> 00:18:59,810 Right. 313 00:18:59,830 --> 00:19:03,690 So that was pretty much it strange, but it did and it by itself. 314 00:19:03,820 --> 00:19:10,840 So we need to add the stop loader from here where it was right stop loader should be. 315 00:19:10,840 --> 00:19:14,740 And it imported here because we want to use it. 316 00:19:15,820 --> 00:19:18,130 OK, so that is pretty much it. 317 00:19:18,310 --> 00:19:23,530 So if I do now Tarzan but I already have the Tarzan. 318 00:19:24,490 --> 00:19:26,830 That was quick by the way, Batman 319 00:19:29,980 --> 00:19:30,510 movie. 320 00:19:32,260 --> 00:19:37,600 So if I come in this one out, it will continuously speed into a movie. 321 00:19:37,990 --> 00:19:38,560 Here it is. 322 00:19:39,010 --> 00:19:39,330 Right. 323 00:19:39,580 --> 00:19:45,170 So if I uncommented that one and if I go again movie, it will be there until it loads. 324 00:19:45,480 --> 00:19:50,700 So mission impossible here. 325 00:19:51,060 --> 00:19:52,020 Here we go. 326 00:19:52,240 --> 00:19:54,880 We do have all of those movies now. 327 00:19:54,880 --> 00:19:57,550 The loader and the stopping of the loader is working. 328 00:19:57,940 --> 00:20:01,720 So I hope you understand why we put it in these places. 329 00:20:01,840 --> 00:20:04,510 So we need to stop the loader after the data is there. 330 00:20:04,660 --> 00:20:10,870 Right, because we are waiting for the data and we here we just loading before the data because we don't 331 00:20:10,870 --> 00:20:12,540 want to load after the data is done. 332 00:20:12,940 --> 00:20:13,630 That's it. 333 00:20:13,630 --> 00:20:14,200 Pretty much. 334 00:20:14,200 --> 00:20:19,800 And what else we did, we clear and we said the input here and that was for this lecture. 335 00:20:19,990 --> 00:20:23,080 So that is pretty much everything for this lecture. 336 00:20:23,080 --> 00:20:24,370 And I will see you in the next one.