All right. Loading indicators in Livewire, uh, they've gotten a sneaky little improvement that you may not notice and may not even ever use, but I'm gonna use and abuse. So let me show it to you. We have a form here to create a post. We hit create post and it throws a validation error. Let's slow this down. So in the save method, I'm gonna say sleep one.

Let's slow this down. So in the save method, I'm gonna say sleep one. And now when I try to save this thing, it's gonna take a full second. Okay, so you saw this Create post button has a loading indi indicator on it, and that is because it's a flux button and Flux knows it's a live wire button and it shows that nice loading indicator automatically. So let's actually trash the flux button and put in our own just plain button element

So let's actually trash the flux button and put in our own just plain button element with some classes to make it look like a flux button. Now I hit create post and nothing happens for a whole second until the validation error is thrown. Obviously this is not ideal. And in Live Wire three you're probably intimately familiar with things like wire loading or wire loading class. Like you could say wire loading class equals opacity 50.

with things like wire loading or wire loading class. Like you could say wire loading class equals opacity 50. And now if you try to submit this, it dims a little bit, uh, with opacity 50. And that's fine and works okay. But what if you want to add a loading icon? So here we have an icon here and you only wanna show it when it's loading. Well, you have to do wire loading, but then you also have to target the loading

Well, you have to do wire loading, but then you also have to target the loading because it's not on the element that triggered the network request. So you have to target it to the form, uh, submission. So to save. So you could do something like this. And now if we hit this, okay, it works good, but uh, targets are not good. I don't like writing them. It feels wrong to me

I don't like writing them. It feels wrong to me because sometimes you have to target a method with a, like a parameter that's a specific parameter or maybe even the element dispatches an event to a completely different component somewhere and there's no way to target that dispatch. So here's a new paradigm that I want you to wrap your head around that I think is really elegant. So let's trash all this stuff that we have here

around that I think is really elegant. So let's trash all this stuff that we have here and go back to the button that does nothing and while it's showing the loading indicator, but whatever. Okay? And then we're gonna look at it in dev tools. And now look at this button element. And I want you to watch where my mouse is and see what changes when I submit the form. Okay, so Livewire automatically disabled the button. Did you catch that? But it also added

Okay, so Livewire automatically disabled the button. Did you catch that? But it also added another attribute down here. So watch again, data hyphen loading equals true. So now in Livewire four, any element that triggers any kind of network request, any live wire request is going to get this data hyphen loading attribute for the duration of that request. Why is that useful? Well, uh, you can use this with tailwind

Why is that useful? Well, uh, you can use this with tailwind to style things however you want. And this is a pattern that Tailwind uses a lot in their component libraries that we use in flux that a lot of other UI libraries use, where you put data attributes on elements to signify certain states and then you style based on those data attributes. It's really elegant. Um, and

and then you style based on those data attributes. It's really elegant. Um, and because it's just in CSS, there's something that feels really good about it. So if we wanna dim this element now while it's loading, I kind of hate that we have that loading indicator shown. It's just a little weird to me if we wanna dim this now using this new technique. Well, tailwind makes it really easy. You can type data loading opacity 50.

Well, tailwind makes it really easy. You can type data loading opacity 50. And so data loading is a whatever, a prefix in tailwind or a modifier, just like if you did SM or hover. It's just saying, Hey, only add this tailwind class or only apply these styles when the data loading attribute exists on this element. So I say data loading colon opacity 50 and now it's just gonna be opacity 50 for the duration of that request, which so great.

and now it's just gonna be opacity 50 for the duration of that request, which so great. And this is, this is it in a nutshell. So take this and run, but let's pull this thread a little more and show you some more interesting things. So this loading indicator down here, you remember we had that problem where because it's not on the actual element that triggers the submission, we have to target it to something else.

that triggers the submission, we have to target it to something else. And I don't love that, but Tailwind makes this really easy as well. We can say in data loading and apply some styles. So in this case maybe we hide, we'll say hidden for the icon by default. And then if this icon is inside an element that has the data loading attribute, do something to it. So let's make it block.

that has the data loading attribute, do something to it. So let's make it block. So now if I hit create post, okay, it showed when it became in data loading, uh, something that we're gonna take it even further here. I really don't like patterns like this where I set hidden to something and then I toggle it on and I set the display type. I don't like it for a few reasons. It's like two selectors when I feel like it should be one.

I don't like it for a few reasons. It's like two selectors when I feel like it should be one. It's also like what if, what if this thing should be flex box by default or inline? And I'm a hard coding block. So sometimes you have to go, oh, that didn't work. 'cause it has to be when it's loading set display to flex and not block and I never liked that. So here's a little pattern to avoid that. You could say not in data loading hidden.

So here's a little pattern to avoid that. You could say not in data loading hidden. So now if you had flex on it or grid or something that'll be preserved, it's just, hey, if it's not in data hidden, uh, sorry, if it's not in data loading, then make it hidden. So it's gonna be hidden by default and the hidden will be removed when it is in data loading. Okay? So that's cool. There's also has, so you could, we could do up here,

Okay? So that's cool. There's also has, so you could, we could do up here, we could say like has data loading, uh, BG black for fun, let's just see that. Okay, so this is the opposite of in it's saying I'm an element. If I have something inside me that has data loading, I want you to do something. And there you go. So these three things, this data loading in

And there you go. So these three things, this data loading in and has, you can combine to achieve pretty much everything you want and it's really clean and I really like it a lot. You can transition, uh, the opacity, you can delay it if you don't want it to show in case the request is fast and you can just use tailwind for all those things. So that feels really good to me.

and you can just use tailwind for all those things. So that feels really good to me. And before we just wrap it up in a little bow, let me blast it away and do something that is ridiculous and you probably shouldn't even do. So here's this post page kind of a post index page that I made and up here you can sort it. So we could say oldest, we could say newest. And let's go to that code. So this is the component for it

And let's go to that code. So this is the component for it and there's this post computed property that actually calls the query and reloads the page. So every time this sort property changes, it is going to re fetch all of the posts with the new sorting order by SQL and refresh the page. Let's make this slow and do some stuff. So if I change newest to oldest now it's gonna take a full second to load, okay?

So if I change newest to oldest now it's gonna take a full second to load, okay? And we didn't get any feedback in the page that all of these items were in a loading state. So you could honestly, this is a case where you might be better off with the old way with wire loading and wire target. But I'm just gonna show you how we can abuse this thing. So here's the select dropdown. It's just a native select element with wire model live sort.

So here's the select dropdown. It's just a native select element with wire model live sort. So that's this element right here. When it changes, it has wire model live on it. And again, because live wire four will automatically add data loading to elements that trigger requests, if I change this to newest, you'll see that it receives data loading equals true. So we can do some real abuse down here. This is some tailwind that you probably would never write

So we can do some real abuse down here. This is some tailwind that you probably would never write and are very scared to and I don't recommend it. But we can do this. We're gonna do, we're gonna make this opacity 50, but we're gonna put a custom tailwind, arbitrary selector here. And we're gonna say when any element on a page has another element inside of it that is, we could say wire model live,

has another element inside of it that is, we could say wire model live, but instead I'm gonna say data dim sorting. Okay? And I'm gonna add this data, data attribute up here just 'cause when I'm targeting a specific thing, I'd rather have a dedicated data attribute that says what it's doing. So I wanna dim the whole thing when it's sorting. So we say if any element on the page has the data sorting

So I wanna dim the whole thing when it's sorting. So we say if any element on the page has the data sorting or data dim sorting attribute and it has data loading on it, then I want you to get myself meaning this element. That's what the ampersand is as a descendant of that and apply opacity 50. Did you follow that? It's really weird. It's really crazy. But if you needed to write the CSS by hand, it would actually look something like this.

But if you needed to write the CSS by hand, it would actually look something like this. But you can do it straight and tailwind, uh, which is again, uh, your mileage may vary. So if I sort to oldest now only the items dim and then if I sort back, they only dim again, you might be better off here with a wire target and a wire loading class. But I just wanted to show you how powerful this can be because you can use CSS in any way you want

But I just wanted to show you how powerful this can be because you can use CSS in any way you want to detect data loading and do whatever you want. Super powerful. I love it a lot. There you go.