So in addition to a nice little placeholder directive in Livewire four, we also get a few more affordances with the lazy loading system in Livewire. And let me show you. So this page here, I ended up adding a bunch more posts to demonstrate my point, and I reworked the component a little bit. So I ripped out all the lazy loading at this level. So this kind of index component where we're showing a bunch of items, I ripped out the lazy stuff,

So this kind of index component where we're showing a bunch of items, I ripped out the lazy stuff, I ripped out the slow stuff, and I even extracted every single postcard postcard like a postcard. I extracted every single postcard into a nested live wire component. And the reason I did this is to demonstrate, well, sometimes you might have a table where every row is a nested live wire component.

sometimes you might have a table where every row is a nested live wire component. You might have a list of messages where everyone is a nested live wire component. And lazy loading can help a lot in this story, but it's important to know a few of the ins and outs. So this card component, let's open that up next to it. It's really simple. It's basically just the HTML of that card and then a prop called post. So I'm passing in a post, I'm giving it a wire key,

that card and then a prop called post. So I'm passing in a post, I'm giving it a wire key, and then it is rendering itself. I also added a little placeholder for it, and I added some slowness to this nested post itself so that instead of the slowness being on the main query at the big component level, we're making each little component slow, just a little bit less slow, uh, a hundred milliseconds because we have a lot of them to show you some things.

a hundred milliseconds because we have a lot of them to show you some things. So we got the foundation laid everybody on the same page. When I load this page, it's gonna load all of these posts. Nothing is lazy, and they're each gonna take a hundred milliseconds. So I hit refresh and now we wait and we wait, we wait. Okay. And there we go. The page loaded. So what do we do about this? First, let's just see what happens if we add

So what do we do about this? First, let's just see what happens if we add lazy to this component. I'm actually not gonna add it at the component level here. I'm gonna add it at the declaration level. And this is something that I like to do when I'm making nested components lazy. I like to put lazy as a prop on the nested component declaration itself. This way I might want to use this component somewhere else.

declaration itself. This way I might want to use this component somewhere else. And I don't want it to be lazy. I'm just saying where I'm using it, I'm deciding if it's lazy or not. So I add lazy to this. And now look at that. So the page loads instantly and all of those posts go and fetch themselves, uh, right away. And if you look at the network tab in our dev tools and we refresh, it just sent out, it just sent out all

And if you look at the network tab in our dev tools and we refresh, it just sent out, it just sent out all of these Ajax requests in parallel. Okay, so one thing to note already is there's only six requests, which is kind of interesting because there's like 30 posts. Well, Livewire by default, its Lazy System is only going to fetch what it needs to show on the page, and it's gonna wait for everything else until the user scrolls to them, which I think is just

and it's gonna wait for everything else until the user scrolls to them, which I think is just a really awesome feature. If you don't like this feature, you can use Defer instead of Lazy. So anywhere using Lazy, you can use Defer. And now it's gonna fetch all of those posts right on page load so that they're totally available for your users. Okay, so back to this.

that they're totally available for your users. Okay, so back to this. I think this looks a little bit awkward and there's a few things we can do. The first thing we can do, this is a new one in Live Wire four, you could actually accomplish this in three, but it, it was worded a little differently. We made it more intuitive. You can set lazy to bundle and now what's gonna happen is it's gonna bundle all of these initial requests

and now what's gonna happen is it's gonna bundle all of these initial requests and then you're still gonna be able to scroll and see more. But instead of it making every single component its own request, it bundles them. And I think in this case, maybe you want that because you want them all to show up at the same time. I think it looks a little weird when they just kind of popcorn into the page in an awkward way. So we have bundle here.

of popcorn into the page in an awkward way. So we have bundle here. That's, that's the main thing that I wanted to show you is the difference between bundle and just the default, which is isolated, you know, requests. But there's another little trick here that I think is really fun. Like, let's say that you want the first six or even nine to be shown right away with the page, like not lazy loaded at all.

or even nine to be shown right away with the page, like not lazy loaded at all. So let's take the first six. Okay? So this is a trick that you can just do, and I kind of stumbled on it. You can make lazy a blade conditional and say like, just to demonstrate, if I say true, then it's all gonna be lazy. If I say false, then it's actually not gonna be lazy at all. The page is still trying to load

If I say false, then it's actually not gonna be lazy at all. The page is still trying to load because there's no lazy loading. But you can put anything you want in this condition. So we can say the loop Laravel gives you this loop variable whenever you're inside a four each loop. So we can say if the loop iteration is greater than six, then we want to bundle it. Okay? So now when the page loads, it's gonna load the first six

Okay? So now when the page loads, it's gonna load the first six and then it's gonna lazy load the rest, and the rest are gonna be available as you scroll. So I think this is a nice little pattern where if, if the, the cost is not that high. So for each post, like if it's a reasonable request, you may want to seed the page with however many are visible to most users on their device, and then lazy load the rest.

however many are visible to most users on their device, and then lazy load the rest. So you get a ton of power here with lazy defer bundle, the nice placeholder directive, uh, I don't know, it's just, it's really cool. And I think lazy is one of the most slept on features of Livewire because it's so easy to just make an app really fast by lazy, loading, expensive parts of it. Um, so that's that. We're gonna talk more about

expensive parts of it. Um, so that's that. We're gonna talk more about how we can apply this same mentality of isolating pieces of a component that are expensive to make the whole app experience better. Uh, we'll see you there.