At some point in time, we have to be concerned with long-running processes. It's just a part of writing applications. But for web apps, it's a little bit more apparent, because these long-running processes can affect the load time of our pages. And longer load times are never something that we want the users to see. Now, of course, this is not a new problem. This is very old, and there are many ways that we can tackle it. But Livewire has the ability to lazily load content. So I'm going to create a new component to display the amount or the number of published articles. Now, I know there are many better ways of doing this. So this is for demonstration purposes. But here for the Vue, I'm going to have some placeholder content. So we'll just have Published and 0, so that inside of the article list in our dashboard, we can include that PublishedCount component. So this is going to be at the top of the article list. But I do

we'll just have Published and 0, so that inside of the article list in our dashboard, we can include that PublishedCount component. So this is going to be at the top of the article list. But I do know we will need to add Flex, JustifyBetween, and ItemsCenter. And in the browser, we can see that it looks okay up here, but I definitely want this table to be wider. I want it to be in line with the edge of the text. So let's add the WFull class to the table. And I just noticed there are two quotes here. I wonder how long that that's been there. And apparently, it's been there from the very beginning, because that looks different. Okay, so this is what we're striving for. But of course, we want to load this content separately. Now again, I know that this isn't the best approach. Just keep in mind, this is for demonstration purposes. So our Vue is going to be very simple here, to where we will simply have Published and then the Count. And that Count

approach. Just keep in mind, this is for demonstration purposes. So our Vue is going to be very simple here, to where we will simply have Published and then the Count. And that Count is going to be supplied as a property. Let's go ahead and define that property. And we can initialize it as 0. I think that that's fine. But then we are going to set its value inside of the mount hook. So we will set Count equal to, we'll use our Article model, where Published is 1 or True. And then we will get the Count. Now of course, this is going to load very quickly. So we need to make this slower. So inside of mount, we will simply call sleep. We don't want something too long, but we also don't want it too short. So let's say 3 seconds, so that in the browser, we can see that it is taking time to load. But then finally, the page loads. So from the end user's perspective, we have a slow running application. Since we know it's going to take

we can see that it is taking time to load. But then finally, the page loads. So from the end user's perspective, we have a slow running application. Since we know it's going to take a while to load the Count of published articles, we need to lazily load that content. And it's very easy to do. All we need is the lazy attribute applied to our component tag. And in the browser, we see that the page has loaded. It's completely loaded, but then our published content pops in out of nowhere. And that's not necessarily something that we want to display to the end user. Ideally, we would have some kind of placeholder content. So back inside of our PublishedCount class, we can add a method called placeholder. This method will automatically be called to provide the placeholder content, and then it will be replaced when the actual content is loaded. So we have that. But in the browser, we see an error. Livewire encountered a missing

called to provide the placeholder content, and then it will be replaced when the actual content is loaded. So we have that. But in the browser, we see an error. Livewire encountered a missing root tag when trying to render a component. And we see this problem because of our placeholder. We simply provided some text. We need to wrap that text with HTML. And that's easy enough to do. We'll just wrap it with a <div>. And once that element is in place, we will see our placeholder text that it is loaded. Well, I typed that wrong, but it was loading. And then once we had the content, it was automatically placed into the page. But if you're like me, this bothers you. I never like to output HTML from php or whatever I'm using as my server language. I would prefer to output a view and then provide that view something. So we could say that we would have a view called Placeholder. And ideally, it would be better named, but Placeholder is going to be

to output a view and then provide that view something. So we could say that we would have a view called Placeholder. And ideally, it would be better named, but Placeholder is going to be fine. And then we could provide a message that we would then display, like, PublishedCount is loading. But of course, we don't have that view. So let's go ahead and create it. So inside of Resources, Views, Livewire, let's take our PublishedCount view and let's copy that for our Placeholder. So then all we would need to do inside of our Placeholder view is output that message. So now we see PublishedCount is loading, and we know that that is working because that's the text that I used. And then the placeholder is replaced with the actual content. And that's it. It's very simple. But now you might ask, what if I have a full page component that I need to lazily load? Well, it's actually quite simple as well. When you define your route, simply chain a

It's very simple. But now you might ask, what if I have a full page component that I need to lazily load? Well, it's actually quite simple as well. When you define your route, simply chain a call to the lazy method. That will lazily load that full page component, and you have all of the benefits of lazily loaded content. And there's one other way that we can specify for a component to be lazily loaded, and that is to use the lazy attribute. And this is a little bit different because this forces your component to always be lazily loaded, which I think we could do in this case because it is always going to take three seconds to load this PublishedCount. In which case, we can go back to our article list, and we can take the lazy attribute out. And in the browser, we see the same behavior. There's our placeholder, and it's replaced with the final content. But now every time that we use PublishedCount, it will always be lazily loaded. And that's it. Livewire's

we see the same behavior. There's our placeholder, and it's replaced with the final content. But now every time that we use PublishedCount, it will always be lazily loaded. And that's it. Livewire's lazy loading feature is very easy to use. You can lazily load any component by just adding the lazy attribute to the component tag. If you have a full page component, you can call the lazy method whenever you define the route. Or if you always want to lazily load a particular component, you can use the lazy attribute.