‫In this lecture, it's time to move
‫into a bit more advanced, or maybe a bit more obscure,
‫topics such as absolute positioning, Z Index,
‫and a few more.
‫So, this is gonna be a lot of fun actually.
‫So, let's get started.
‫And the idea here is to now finally format our loader here.
‫So, let's come here to the menu, actually.
‫And notice how right now, that loader is showing up there
‫at the top of the page.
‫So, let's come to our app layout.
‫And in order to format the loader,
‫let's actually always display it.
‫So, let's comment this one out.
‫And here, let's just say true.
‫And so with this, the loader will basically always be there.
‫So, what we want with this loader is
‫that it basically will cover the entire page here,
‫sitting kind of in the middle here.
‫So, on top of everything else,
‫and also adding a small background blur.
‫So, the way we can achieve this with CSS is
‫to basically add one parent element around this loader here,
‫and then absolutely position that element here
‫in this top left corner and making it so
‫that it occupies the entire page.
‫So, let's do that here in our loader.
‫And as I was just saying,
‫let's then wrap this entire element here into another div.
‫Okay, so for now, of course nothing happens.
‫And so, let's start by adding some class names here.
‫So, first of all, we want to position this absolutely,
‫so using absolute positioning.
‫And so we can do that just using the absolute class.
‫And just like this, now the loader appears at least already
‫on top of the rest of the page.
‫Next up, let's give it a background color.
‫So, this time actually not using stone, but slate,
‫because this is going to look just a bit better.
‫So, let's use 200 here for now.
‫And what we also want is for this
‫to stretch the entire view port.
‫So, the way in which we can achieve that is
‫to set both the top, the bottom, the left,
‫and the right position to zero.
‫And, thankfully for us, in Tailwind,
‫there is a nice utility class for that.
‫And so that is called inset zero.
‫And so what this does is basically what I just explained.
‫However, now we can, of course,
‫no longer see the background here.
‫And so now it's time to give this some opacity,
‫which we can do by adding a slash here
‫and then a value between zero and 100, basically.
‫So, for example, 50% opacity would be this,
‫but let's just go with 20 here.
‫So, something very subtle, because now,
‫to make this look even nicer,
‫let's add a really nice background blur.
‫So, this we can achieve with backdrop blur,
‫and then we can choose one of these options here.
‫So, for example, let's choose the small one,
‫which will give us this blur of four pixels.
‫Give it a safe.
‫And this looks really nice and really real world as well.
‫Now, all we have to do is to center this here in the middle,
‫which is a piece of cake, using Flexbox.
‫So, let's just flex and then align the items to the center,
‫which is just items center and then justify center as well.
‫So, just like this. And, there we go.
‫And finally, the last thing that we need
‫to fix here is the color of these bars.
‫Because, let's come here to the index.css, where you see
‫that this loader was actually defined using just this class.
‫So, first off, let's move all of this here
‫into the components layer.
‫So, it works exactly the same way as before,
‫but with this, it's a bit cleaner.
‫So, it's a bit more the Tailwind way,
‫but notice how this is just using this random color here.
‫So, it's not random, but it's just some unrelated color
‫that is not related to the rest of the application.
‫However, luckily for us, Tailwind gives us a nice way
‫of accessing Tailwind's colors right here.
‫So, instead of hard coding this value here,
‫we can write, "theme."
‫So, without that hash, so just theme.
‫And then colors.stone.800.
‫Give it a safe, and then if you check this out,
‫then this is exactly the stone color
‫with the value of 800 that we saw earlier here
‫in our Tailwind documentation.
‫And so with this, we just used
‫all these weird properties here, or these weird class names,
‫to create this really nice, beautiful effect.
‫And, actually, I had to look some of these up here, also
‫in the documentation.
‫So, without the documentation, I would be completely lost.
‫And so that's why I keep telling you
‫that whenever you need something,
‫you can just come here and look it up.
‫All right, and now let's remove this here
‫and put it back to what we had earlier.
‫And so, if we now come here,
‫then we see this loading indicator.
‫And then finally, once the data arrives,
‫our menu page here will be rendered.