Lazy loading in Livewire is an incredibly powerful utility. And Livewire four builds on it in just a few small ways that I wanna show you. So this page that we built in the last episode where we had that little sort by filter and when it sorts, it dims out the rest of the page and to get it to actually show so that we could see it, we added a sleep of one second into the post query. So right in our computed property we say we're just gonna

we added a sleep of one second into the post query. So right in our computed property we say we're just gonna hold PHP up for one second and then that simulates a slow query. So I think this is a good example to, as kind of a segue for what I wanna show you because we have the slow query in the component and it makes sense for something like changing, you know, sort by, but it also holds up the entire page load. So if I go to refresh this page, it takes a full second

the entire page load. So if I go to refresh this page, it takes a full second until it reloads because if there's a slow query in a component, your whole app is held up. So how do we unblock that? Well, live wire three gave us lazy loading. So we can add the lazy attribute to any component. You could also, if you had like live wear column post create or something, you could add a lazy prop right there on a

You could also, if you had like live wear column post create or something, you could add a lazy prop right there on a one-off component basis. But so we say that this component is gonna be lazy and now when we load it in the browser, refresh the page, it's just a blank screen and then our component comes in after it's already loaded. So now the page is instant, the sidebar loads, but the contents wait a full second. But of course you don't want just like a blank

but the contents wait a full second. But of course you don't want just like a blank page showing to your users. So what do you do? Well, live wear three had public function placeholder and it's kind of like a render method, but just for the placeholder portion. And I personally never loved it. It felt kind of awkward to me like I had to have a separate blade view.

It felt kind of awkward to me like I had to have a separate blade view. That's a placeholder where you could return like a string here and write a diviv by hand like this and then load it and then your diviv would show up. I don't know, none of that felt good. So we wrote something else. Now in live wear four there's a placeholder directive, end placeholder, okay. And now we could write that same div

end placeholder, okay. And now we could write that same div and it shows up right there. And I think this just feels really, really good. And you're gonna see a little bit later when we talk about islands, how this placeholder directive is useful in a couple other ways. Like anytime we're lazy loading anything, there should be a placeholder directive available to you so that you can just define the HTML

there should be a placeholder directive available to you so that you can just define the HTML that you wanna be the placeholder right next to the actual HTML of the component. So lemme replace this with a little skeleton that I made. So this is very simple, it's a diviv, it's a heading a text, and then this flux skeleton, which is flux, just has a nice little skeleton component that makes it kind of shimmer. You'll see what I mean in a second.

that makes it kind of shimmer. You'll see what I mean in a second. I'm basically trying to mirror the skeleton layout of the actual official page and I'm putting that in placeholder. And now for really easy, just what is this, like 10 lines of code, you get this really cool effect. You ready? So check that out. So it's like perfect skeleton loaders so easy, so simple.

So it's like perfect skeleton loaders so easy, so simple. You can just kind of inside at placeholder, write a bunch of tailwind yourself to mirror the structure of the actual page with whatever kind of, could just be gray divs that animate a pulse or something in tow and or you could create your own shimmer animation or use flux of skeleton. This is again, totally a free component.

or use flux of skeleton. This is again, totally a free component. Um, so I'm just really happy about it. I think it's such a simple little improvement. And again, you're gonna see placeholder in a little bit. So we'll see you there.