Loading states: Learn Livewire

00:09

For example, you might want to show a message while your form is being submitted, particularly if you have quite a bit of data in here or you have slow network connections.

00:18

You want the user to know that this is loading. So we're going to take a look at a really small example of that. And then we're going to take this a little bit further and do some other things with our form

00:27

and also talk about Livewire's default behavior when we submit a form. So let's look at the most basic here. The first thing that we want to do

00:36

is introduce an artificial delay for this to be created. So I'm going to go and validate this, but then I'm going to sleep for a few seconds. So let's just say three seconds just

00:46

to keep it as long as possible, but not too long. So if we hit Submit, you can see that we get our validation messages through, but then we have a slight delay after the validation works before this is created.

00:57

So I'm going to say another book by Alex. I'm going to hit Submit. And OK, yeah, so I'm going to get rid of these minimums here because we don't really need these.

01:06

And let's try this again. So another book by Alex. Hit Submit. That takes a few seconds, and then it gets created.

01:17

So we've added that artificial delay in there. Now, to add a really basic loading state, we can do this directly within our template. So for example, just down here underneath the form,

01:27

we can introduce a div which will have some sort of loading. Now, this could be a loading indicator, a spinning loading indicator, whatever you want it to do. I'm just going to add loading in there for now.

01:37

And then onto this, what we do is we use wire and loading. That's pretty much it. So while LiveWire is making a net request, this will be showing.

01:46

So you could have a whole overlay on your page. Obviously, because this is just a standard element, you can style this up however you want. So let's say a book by Alex.

01:55

Now, you'll notice a little flicker there. We're going to fix that up in just a second. But when I hit Submit here, you can see that we get loading until that network request is

02:04

finished. And then, of course, it disappears, because it is no longer there. Now, let's fix up that little flicker,

02:10

because you can see every time I click, we get a flicker of this appearing here. Now, we can actually add a delay onto this. And there are a couple that you can choose from,

02:21

things like short, long, and I think there's extra long. They're all in the documentation. But let's set delay to long. I think that's about 300 milliseconds,

02:29

but I might be wrong. So let's go ahead and try this again. I'm going to hit Submit. And you can see that that does not flicker now.

02:35

It's waiting for a request to take at least 300 or whatever the value is in milliseconds before it goes ahead and shows that loading state. So if we go ahead and say a book by Alex again,

02:49

and we hit Submit, then we show the loading message. And then, of course, when that finishes, it disappears again. So you can customize the behavior of this

02:58

to do whatever you want. OK, so now we're going to talk about something slightly different. I'm going to go ahead and just comment this out,

03:06

just so it doesn't get in the way. When I hit Submit here, after the validation has passed, so again, I'm going to just enter some details in here. When I hit this, let's check out what happens to this button.

03:18

So I'm going to go ahead and inspect this button. We'll just keep it up in here. When I click on this, you'll notice that Livewire automatically applies the disabled attribute

03:28

to your buttons within your forms, which is super handy. Basically, this means if you do have a network request which takes a little bit longer, you can't just keep clicking that button and potentially creating

03:39

duplicate records. So Livewire handles doing that for us, which is really helpful. And then what you can do is just go ahead

03:46

and apply some styles to your button to show that this is actually loading. So we're working with Tailwind here, but you can do this with vanilla pure CSS.

03:56

It doesn't really matter. If we were doing this with Tailwind, we would go ahead and use the disabled modifier here. And then we could just apply any style

04:03

to this based on the disabled attribute being available. So for example, I might just want to be really lazy and set the opacity to 50, so half the opacity. And then that would be applied when Livewire automatically

04:17

adds the disabled attribute. So that's a really handy feature that we can have here. So let's go and just try this out. I'm going to click Submit.

04:25

And of course, we get a flicker of that, but that's fine. We're going to go and say a book by Alex. We've got that three second delay. And of course, that now shows that opacity of 50

04:34

while that is loading. And of course, you could change your button around to do whatever you wanted. Now, we're working with a Submit button here,

04:41

which means Livewire automatically applies that disabled attribute to it. But what if you're working with a button that isn't a Submit button?

04:49

So let's go on a little bit of a tangent. And we're going to go and just create out another button in here, which calls a method. We're not going to use this for anything,

04:57

but I'm just going to say Click Me. Now, maybe this isn't a Submit button. Livewire will not apply the disabled attribute to other buttons unless they are a Submit button within a form.

05:09

So if you had a button which, for example, deleted something, which we're going to do later, how would we apply a attribute to this button? Well, let's go ahead and hook this up to do something

05:19

when we click on it. So I'm just going to call this Example, just so we can delete it afterwards. We'll come over to our book index,

05:26

and we'll create out a example method in here. And in here, we'll do the same thing. We'll simulate this sleeping for three seconds. So we've seen the behavior on here.

05:36

But if we apply the same class to this on Disabled, so Opacity of 50, this isn't actually going to work. So I'm going to click Click Me. It does have that three-second delay

05:49

before the request gets sent through, but it is not actually adding that disabled attribute. So how do we do this? Well, we can go ahead and specifically provide

05:59

the wire loading, which is similar to what we did down here on this. And we can use the Attribute modifier to choose what attribute we want to apply to this

06:08

when the request is being sent. So obviously, in our case, that's going to be Disabled. So what this is going to do now, even if this button is outside of a form, and it isn't actually submitting a form,

06:19

it's just performing some action, it's going to have the same effect. And you can see that the opacity has been applied here. So this doesn't just apply to form buttons.

06:27

That's the default behavior with a form button. If you have buttons outside of a form, you can also use this behavior as well, which is really, really handy.

06:36

So I'm going to go ahead and get rid of that, because we're not going to end up using that. But it's useful to know that we can do that. In fact, let me just bring this back and comment it out,

06:45

just so we've got it there as a reference. Now, we can obviously take things like this that we've done and actually make this a little bit more interesting.

06:53

So for example, we could take this element here, and I'm going to comment that out there. And we can just apply maybe some different text in here, based on whether it's loading or not.

07:03

So I'm going to go ahead and add this in here. I'm actually going to change this over to a span, so it makes more sense within a button. And let's just look at the behavior here.

07:11

Remember, we're just working with the HTML elements here. So I can set a kind of loading indicator when I click on this. So let's say a book, again, by Alex.

07:19

And we'll hit Submit. And sure enough, we get that loading state into here. But how do we get rid of Submit if we're loading? Well, there's another modifier that we can use called Remove.

07:32

So for example, we could duplicate this down. We could have the Submit text in here when this is loading, but only remove it when it's loading. So we still can use these delay modifiers.

07:47

So this one will show when it's loading with a long delay. This one will show when it's loading. Well, it will delete it when it's loading with a long delay. So this removes this one and shows this one.

07:57

Hopefully, that makes sense. So let's just try this out one more time, and then I think we're done with our book submission state. So I'm going to hit Submit, and there we go.

08:05

That's been removed. That's swapped over to loading. And then we obviously get the expected behavior, and that creates the book, resets the form state,

08:13

and we're all good. So tons of things that you can do here with loading state, particularly within forms. There's a load more stuff on the documentation,

08:20

but now you've got the basics of this. This is pretty much what you'll be doing 90% of the time. You can dive into the docs and find out for any specific use cases that you have.

Sign up to access "Learn Livewire" right now.

Episodes

Transcript

Episode summary

Episode discussion