Okay, let's take a look at building skeleton placeholders for when our data is loading from the API. So right now we have loading spinners, and there's nothing wrong with that. But it's a bit janky and abrupt when the data does come in back from the API. So if you take a look at sites like YouTube, so if you pay close attention to when it loads, you'll see a placeholder before the images come in. So basically just boxes and rectangles for where the content's supposed to be. So let's go ahead and build something like that for our app. So let's go into our code, and here is the PopularGames component. And I'm just going to comment out the for else for now, just so we can always see the

So let's go into our code, and here is the popular Games component. And I'm just going to comment out the for else for now, just so we can always see the empty state here. So I'll comment this out, I'll comment this out, and now the spinner should always be there. Okay. So like I said, we just want to sort of replicate our content with boxes and rectangles. So let's do that. Let's grab something from here. Actually, let me uncomment this for a sec and just copy this div that houses a game.

Let's grab something from here. Actually, let me uncomment this for a sec and just copy this div that houses a game. So let me copy that, and then I'll re-comment that out, and then I will replace it with this. So this should have our game, and we're not in the for loop. So we have to say image goes here. And I'm not going to put the rating in here. You can if you want, but I'm not going to do that. This is the game name. So let's just say title goes here.

Let's see how this looks. Okay. So we just have to turn this into boxes and rectangles. So let's do that. So for the image, we just need to add a class and give it a background. I'm going to do bg-gray-800, and we just have to play around with the sizes and see what is a good size. So height 56. I believe these are defaults. And since I added a width and a height, I don't need content in here.

I believe these are defaults. And since I added a width and a height, I don't need content in here. Let's see if that gives us a box, and it does. So this is a bit too wide. The height or the width I ended up using is width 44, which is not a default size. So let's go ahead and add it here. And our Tailwind config. So we are going to extend the spacing scale. So let's do spacing, and we want to add 44. And 44 divided by 4 is 11.

So let's do spacing, and we want to add 44. And 44 divided by 4 is 11. So it's 11 rems. Okay. And let's make sure to npm run dev. Okay. That's done. Let's take a look at if that made it a bit more narrow. Okay. So that's good.

Cool. So let's do the same for the systems here. So say text-transparent, bg-gray-700. And let's make it rounded. I want to make this text rounded too. And I want to give it a bigger margin-top here. margin-top. Okay, that looks okay. I want to give this a bit more of a margin. So let's say margin-top of 4.

This is just a simple explanation with no code.

Okay, that looks better. So now, since this is within a grid up here, you see the parent is a grid container. We can just foreach over this and specify 12 items, just like we have for the actual games. So you say foreach, and it's use the range helper or the range method in php, say 1 to 12 as game. And it's put this in there. Okay. And that should produce 12 of these. Awesome.

And that should produce 12 of these. Awesome. Now, let me put the original back and see if it looks good when it transitions from the skeleton loader to the actual content. So let's put this back. And it's refresh. And that looks pretty good to me. So, yeah, we just have to do the same thing for these components as well. So let's go ahead and do that. So here I am in my recently reviewed component.

So let's go ahead and do that. So here I am in my recently reviewed component. Let's go ahead and grab this div and copy it and paste it in here. And then we can get rid of this and just say that this is the image. Let's just say image goes here, and I'm not going to do the rating. And this is the gameName. So let's just make it a div close that and say title goes here. And these are the systems. So let's just hard code that say PS4, switch, PC. And the summary goes here.

So let's just hard code that say PS4 switch PC. And the summary goes here. Say lorem 50. Okay. So now let's just comment this out and comment out this. Okay. Let's see what we get. Okay. So let's start with the image here. So let's get rid of this and give it a class and a width and a height to get our background.

And it looks kind of weird with something here. So I'm just going to get rid of this. And like I said, I want, like, separate lines for each of these lines of text. So we have to do that manually. So I'm going to give this a margin-top of 8 to make this a div as well. So let me just change this. And I am going to use the space-y utility to give it space in between each line. And it's going to be hidden on mobile, and it's going to be visible on large and above. So each one of these will just be a rectangle. So span.text-transparent.bg-gray-700.rounded.inline-block.

So each one of these will just be a rectangle. So span class="text-transparent bg-gray-700 rounded inline-block". And let's just say lorem 8. And let's repeat this. How many times? 3 times for three rectangles. See if that works. And that looks pretty good to me. Maybe a bit longer on the text. So let's say lorem 5.

Maybe a bit longer on the text. So let's say lorem five. That's too much. Lorem three. Still too much. Lorem two. Maybe just one. Okay, that looks good. So we can just foreach over this. So let's do foreach.

So yeah, let's move on and I'll just do one of these since they are basically the same thing. Okay, let's open up mostAnticipated. And I am going to grab a game. And I am going to paste it in here. And I am going to comment this out and comment this out. And this is where the image goes image and the title goes here. And the release date goes here, say, September 14th, 2020. Okay. See how that looks.

Okay. See how that looks. Okay. So let's start with the image. So let's give it a class bg-gray-800. So with h-16 w-20 and say flex-none. So it doesn't move. And let's remove this. See if that looks okay. Okay.

See if that looks okay. Okay. Let's make title a bit longer. Okay. And let's change this to a div. So we don't need this div, div, and we don't need the hover text. So text-transparent bg-gray-700 rounded and make it leading-tight. See if that looks okay. Okay. And let's do the same for the date.

Okay. And let's do the same for the date. Text transparent bg-gray-700 rounded and make it inline-block. Okay. And let's just give it a bigger margin here, say two, maybe three, say two. And that looks good to me. Okay. So again, let's do foreach. There's four here. So let's do foreach range(1, 4) as $game.