1 00:00:01,170 --> 00:00:03,720 ‫In this lecture, it's time to move 2 00:00:03,720 --> 00:00:07,980 ‫into a bit more advanced, or maybe a bit more obscure, 3 00:00:07,980 --> 00:00:12,390 ‫topics such as absolute positioning, Z Index, 4 00:00:12,390 --> 00:00:14,100 ‫and a few more. 5 00:00:14,100 --> 00:00:16,920 ‫So, this is gonna be a lot of fun actually. 6 00:00:16,920 --> 00:00:18,513 ‫So, let's get started. 7 00:00:19,920 --> 00:00:24,920 ‫And the idea here is to now finally format our loader here. 8 00:00:26,100 --> 00:00:30,210 ‫So, let's come here to the menu, actually. 9 00:00:30,210 --> 00:00:34,598 ‫And notice how right now, that loader is showing up there 10 00:00:34,598 --> 00:00:37,019 ‫at the top of the page. 11 00:00:37,019 --> 00:00:41,130 ‫So, let's come to our app layout. 12 00:00:41,130 --> 00:00:43,710 ‫And in order to format the loader, 13 00:00:43,710 --> 00:00:46,413 ‫let's actually always display it. 14 00:00:47,640 --> 00:00:49,680 ‫So, let's comment this one out. 15 00:00:49,680 --> 00:00:51,810 ‫And here, let's just say true. 16 00:00:51,810 --> 00:00:55,893 ‫And so with this, the loader will basically always be there. 17 00:00:56,820 --> 00:00:59,610 ‫So, what we want with this loader is 18 00:00:59,610 --> 00:01:02,891 ‫that it basically will cover the entire page here, 19 00:01:02,891 --> 00:01:05,610 ‫sitting kind of in the middle here. 20 00:01:05,610 --> 00:01:07,341 ‫So, on top of everything else, 21 00:01:07,341 --> 00:01:10,563 ‫and also adding a small background blur. 22 00:01:11,760 --> 00:01:15,210 ‫So, the way we can achieve this with CSS is 23 00:01:15,210 --> 00:01:20,210 ‫to basically add one parent element around this loader here, 24 00:01:20,460 --> 00:01:23,010 ‫and then absolutely position that element here 25 00:01:23,010 --> 00:01:25,988 ‫in this top left corner and making it so 26 00:01:25,988 --> 00:01:28,743 ‫that it occupies the entire page. 27 00:01:29,850 --> 00:01:33,270 ‫So, let's do that here in our loader. 28 00:01:33,270 --> 00:01:35,100 ‫And as I was just saying, 29 00:01:35,100 --> 00:01:40,100 ‫let's then wrap this entire element here into another div. 30 00:01:42,669 --> 00:01:47,669 ‫Okay, so for now, of course nothing happens. 31 00:01:49,497 --> 00:01:53,760 ‫And so, let's start by adding some class names here. 32 00:01:53,760 --> 00:01:57,510 ‫So, first of all, we want to position this absolutely, 33 00:01:57,510 --> 00:01:59,670 ‫so using absolute positioning. 34 00:01:59,670 --> 00:02:04,670 ‫And so we can do that just using the absolute class. 35 00:02:06,690 --> 00:02:11,690 ‫And just like this, now the loader appears at least already 36 00:02:11,760 --> 00:02:14,193 ‫on top of the rest of the page. 37 00:02:15,300 --> 00:02:18,003 ‫Next up, let's give it a background color. 38 00:02:19,260 --> 00:02:23,219 ‫So, this time actually not using stone, but slate, 39 00:02:23,219 --> 00:02:27,540 ‫because this is going to look just a bit better. 40 00:02:27,540 --> 00:02:30,450 ‫So, let's use 200 here for now. 41 00:02:30,450 --> 00:02:32,970 ‫And what we also want is for this 42 00:02:32,970 --> 00:02:36,000 ‫to stretch the entire view port. 43 00:02:36,000 --> 00:02:38,610 ‫So, the way in which we can achieve that is 44 00:02:38,610 --> 00:02:41,676 ‫to set both the top, the bottom, the left, 45 00:02:41,676 --> 00:02:45,210 ‫and the right position to zero. 46 00:02:45,210 --> 00:02:47,460 ‫And, thankfully for us, in Tailwind, 47 00:02:47,460 --> 00:02:50,850 ‫there is a nice utility class for that. 48 00:02:50,850 --> 00:02:54,660 ‫And so that is called inset zero. 49 00:02:54,660 --> 00:02:58,570 ‫And so what this does is basically what I just explained. 50 00:02:58,570 --> 00:03:00,930 ‫However, now we can, of course, 51 00:03:00,930 --> 00:03:03,420 ‫no longer see the background here. 52 00:03:03,420 --> 00:03:06,480 ‫And so now it's time to give this some opacity, 53 00:03:06,480 --> 00:03:08,872 ‫which we can do by adding a slash here 54 00:03:08,872 --> 00:03:13,693 ‫and then a value between zero and 100, basically. 55 00:03:13,693 --> 00:03:17,437 ‫So, for example, 50% opacity would be this, 56 00:03:17,437 --> 00:03:21,000 ‫but let's just go with 20 here. 57 00:03:21,000 --> 00:03:23,790 ‫So, something very subtle, because now, 58 00:03:23,790 --> 00:03:25,445 ‫to make this look even nicer, 59 00:03:25,445 --> 00:03:28,953 ‫let's add a really nice background blur. 60 00:03:30,510 --> 00:03:34,463 ‫So, this we can achieve with backdrop blur, 61 00:03:34,463 --> 00:03:37,440 ‫and then we can choose one of these options here. 62 00:03:37,440 --> 00:03:40,560 ‫So, for example, let's choose the small one, 63 00:03:40,560 --> 00:03:44,074 ‫which will give us this blur of four pixels. 64 00:03:44,074 --> 00:03:45,870 ‫Give it a safe. 65 00:03:45,870 --> 00:03:50,870 ‫And this looks really nice and really real world as well. 66 00:03:50,970 --> 00:03:54,720 ‫Now, all we have to do is to center this here in the middle, 67 00:03:54,720 --> 00:03:58,230 ‫which is a piece of cake, using Flexbox. 68 00:03:58,230 --> 00:04:02,190 ‫So, let's just flex and then align the items to the center, 69 00:04:02,190 --> 00:04:07,190 ‫which is just items center and then justify center as well. 70 00:04:09,660 --> 00:04:12,811 ‫So, just like this. And, there we go. 71 00:04:12,811 --> 00:04:15,480 ‫And finally, the last thing that we need 72 00:04:15,480 --> 00:04:18,960 ‫to fix here is the color of these bars. 73 00:04:18,960 --> 00:04:23,960 ‫Because, let's come here to the index.css, where you see 74 00:04:25,560 --> 00:04:30,560 ‫that this loader was actually defined using just this class. 75 00:04:31,094 --> 00:04:34,260 ‫So, first off, let's move all of this here 76 00:04:34,260 --> 00:04:36,363 ‫into the components layer. 77 00:04:38,790 --> 00:04:41,664 ‫So, it works exactly the same way as before, 78 00:04:41,664 --> 00:04:44,070 ‫but with this, it's a bit cleaner. 79 00:04:44,070 --> 00:04:46,370 ‫So, it's a bit more the Tailwind way, 80 00:04:46,370 --> 00:04:50,670 ‫but notice how this is just using this random color here. 81 00:04:50,670 --> 00:04:53,853 ‫So, it's not random, but it's just some unrelated color 82 00:04:53,853 --> 00:04:58,080 ‫that is not related to the rest of the application. 83 00:04:58,080 --> 00:05:01,312 ‫However, luckily for us, Tailwind gives us a nice way 84 00:05:01,312 --> 00:05:05,460 ‫of accessing Tailwind's colors right here. 85 00:05:05,460 --> 00:05:08,010 ‫So, instead of hard coding this value here, 86 00:05:08,010 --> 00:05:10,590 ‫we can write, "theme." 87 00:05:10,590 --> 00:05:13,800 ‫So, without that hash, so just theme. 88 00:05:13,800 --> 00:05:18,633 ‫And then colors.stone.800. 89 00:05:20,460 --> 00:05:23,790 ‫Give it a safe, and then if you check this out, 90 00:05:23,790 --> 00:05:26,867 ‫then this is exactly the stone color 91 00:05:26,867 --> 00:05:30,930 ‫with the value of 800 that we saw earlier here 92 00:05:30,930 --> 00:05:33,390 ‫in our Tailwind documentation. 93 00:05:33,390 --> 00:05:36,960 ‫And so with this, we just used 94 00:05:36,960 --> 00:05:41,960 ‫all these weird properties here, or these weird class names, 95 00:05:42,360 --> 00:05:45,753 ‫to create this really nice, beautiful effect. 96 00:05:48,150 --> 00:05:51,246 ‫And, actually, I had to look some of these up here, also 97 00:05:51,246 --> 00:05:52,950 ‫in the documentation. 98 00:05:52,950 --> 00:05:56,820 ‫So, without the documentation, I would be completely lost. 99 00:05:56,820 --> 00:05:59,183 ‫And so that's why I keep telling you 100 00:05:59,183 --> 00:06:01,068 ‫that whenever you need something, 101 00:06:01,068 --> 00:06:04,803 ‫you can just come here and look it up. 102 00:06:06,510 --> 00:06:09,904 ‫All right, and now let's remove this here 103 00:06:09,904 --> 00:06:13,650 ‫and put it back to what we had earlier. 104 00:06:13,650 --> 00:06:17,193 ‫And so, if we now come here, 105 00:06:18,300 --> 00:06:20,370 ‫then we see this loading indicator. 106 00:06:20,370 --> 00:06:23,325 ‫And then finally, once the data arrives, 107 00:06:23,325 --> 00:06:27,273 ‫our menu page here will be rendered.