Okay, let's work on the notification count in the badge here, as well as a few other small things. So let's go to our component. Let's add a new piece of state here called notificationCount. And we can set it here in the mount method, but I'm just going to put it in a method because I know I'm going to make use of it in several places. So let's say this getNotificationCount. And let's go ahead and make that method, put it right underneath, getNotificationCount. So let's go ahead and set that. So this notificationCount, and we can get this from the logged in User.

So let's go ahead and set that. So this notificationCount, and we can get this from the logged in User. So we can do auth()->user()->readNotifications, like we did in here. But we just want to grab the count on readNotifications. And let's make sure we're doing it at the database layer. So let's call it as a method, instead of loading it all at once in memory. And then we can call count. And we'll do the same thing here in a second. Okay. So now in the view, we can make use of this notificationCount.

Okay. So now in the view, we can make use of this notificationCount. So back to our view, commentNotifications. Instead of this hard coded eight here, we can just echo out that notificationCount. Okay, cool. Does that work? Doesn't seem to work. Sorry. This should be notificationCount. Refresh.

This should be notification count. Refresh. And we have five. So that should be correct. There are five in here. Cool. So I think I have another User logged in in my other window here, and this should be zero. Okay. But I don't want this to show up if there are no notifications. So in the view, we can just check for it in here.

But I don't want this to show up if there are no notifications. So in the view, we can just check for it in here. So we can just wrap this in an if, else if. So we can just check for the notificationCount. And if it's at least one, then it should render. Okay. And now, since this User doesn't have any, it should not render. Okay, cool. This should still be the same. Now I also want a threshold for the number here.

This should still be the same. Now I also want a threshold for the number here. For example, if it's over a certain number of notifications, I just wanted to show that number plus. So for example, if we have over 10 notifications, just say 10 plus instead of how many notifications there are. So we can do that in our method here. Back here, we can just do a check here and say if this notificationCount is greater than some sort of threshold, let's just say 3 for now, since we have 5, then we can reassign it.

So let's delete three of these. Then it should just show the actual count. Okay. So I'm going to put that in a constant instead. So we don't have any magic numbers floating around. So let's say const notificationThreshold equals, I'm going to say 20 or let's say 3 for now to make sure it still works. And we can just say self::notificationThreshold. Same for this, but now we can append the + here. Oops.

So we have three plus now. Cool. So let me just change the threshold here to something bigger, say 20. Awesome. Okay. With that threshold in place, we also want to limit the amount of notifications that show here. So again, let me set it to something low so we can see it. So back to 3. And in here where we're grabbing our unreadNotifications, we want to make sure that we

So back to three. And in here where we're grabbing our unread notifications, we want to make sure that we only grab that amount of notifications. So instead of grabbing everything, because this could potentially have thousands of records and we don't want to load everything into memory, let's make sure we grab it from the database and let's make sure the latest is on top. I think that's the default, but that's okay. And let's take the threshold here. So again, self.notificationThreshold. So it's only going to take max three in this case.

This is just a simple explanation with no code.

ideas are found. Okay. So let's grab that. I believe that's an ideas index. Is it in here? Yeah. So it's this right here. So we can grab this, go back to our view. And where's the foreach year right here? We don't need this.

And where's the foreach year right here? We don't need this. And I can't use forElse here because I have this extra ally, which has the mark all as red button right here. So we'll just use an if here. So let's wrap this in another if or a conditional. So if notifications is not empty, then go ahead and do this. So let's indent this, but if it is empty, let's go ahead and add an else case and end the if here, and we can paste in that placeholder we have. Let's say no notifications, or let's say no new notifications is better.

So you can't really see them loading in. However, in reality, there might be a slight loading time for that to happen. So we can simulate a loading time in our component here. So when we get notifications here, let's just sleep for, say, a second or something, then you'll see it. So I see no new notifications, and then they do load in. So we can either add a loading spinner or a skeleton loader. So I prefer skeleton loaders as when the content does load in, it's not as abrupt. So let's go ahead and do that. So first, we need a new piece of state to check if it's loading or not.

So let's go ahead and do that. So first, we need a new piece of state to check if it's loading or not. So let's do that first. Back here. Let's say isLoading. Okay. And let's say isLoading is true here, it's loading by default. And then after it's loading down here. So after this, we can say isLoading is false. So let's set this to false.

So after this, we can say isLoading is false. So let's set this to false. Okay. Let me increase the count here so we can see it, say, two seconds. And then in our view, we have to add an else if case here. So the first case, or the first if, if it's not empty, and we're not loading, not isLoading. And go ahead and do this. Else if is the second case. So right here, or not here, over here, else if, and the case is loading, or the case is isLoading.

Okay, now we just need these lines here. So I'm going to make three lines. And hopefully that looks okay. So let's say ml-4 to give it some margin on the left. And I want three lines here. So let's do bg-gray-200 with full. Let's make it rounded and give it a height of h-4. Okay. And let's do that three times. See how that looks.

Okay. So there it is. Let's see how it looks between the lines. So let's say space Y four, or let's try two. Okay. Looks good. And let's make the last line a bit smaller. So width 1/2 is good for me. And that looks pretty good to me. So let's go ahead and wrap this in a foreach, and we'll do it three times.

And that looks pretty good to me. So let's go ahead and wrap this in a foreach, and we'll do it three times. So say foreach, you can just use range(1, 3) as $item. And then we can just put this, put this in there. Okay. See how that looks. And that looks pretty good. Let's put it back to something we can see and then have the content load in after. So we have it. And then the content loads in after I believe Tailwind has some animation classes built.

So we have it. And then the content loads in after I believe Tailwind has some animation classes built in. So let's see if we can make use of that. So this one right here is made for skeleton loaders called pulse. All we have to do is add animate pulse, and that should add this effect here where it fades in and out slowly. So let's add that. Let's make this a bit longer so we can see it. animate pulse.

Again, you won't even see that loader because it loads so quickly on development, but it's there in the background if you want to see it or if your connection is slow. So as always, let's make a commit here. This is episode 61, git add, git commit, episode 61, badge, count, and skeleton loader.