hx-indicator & Swap Delays

[00:00:00]
>> But still this doesn't feel interactive, right? We want it to feel like something's happening cuz right now it just kind of pops out. You don't know if a request has been made, you don't know what's happening. Are you going to press it multiple times? Are you freaked out?

[00:00:12]
You could be freaked out. So let's start by adding a simple time delay right here. So I'm gonna go Sleep, and hopefully one second, pretty good. I'm gonna first started off with 3 seconds, so it's like really obvious to see and feel the terribleness of this. So I'm gonna just press this button over this.

[00:00:27]
Is it requesting? We don't even know what that okay, there we go, it got deleted, it just disappeared. If you had a big list of items, also in something shifted it might be very hard to see. It's not a great experience we should probably fix all of these things at the same time.

[00:00:42]
So we have two options we have hx-indicator and swap delays. Both are very exciting and both solve different problems. So let's start off with the indicator, okay? I want you to add these two lines to your server which is just saying hey statically serve these directories. I'll paste it in twitch chat boomer websites are the best, I mean fair statement, all right?

[00:01:06]
So I'm gonna go up to the Tippity top up here and I'm just gonna say, hey. There you go, serve out images, serve out css. That's why I had you kind of use this project to begin with because there is css, there is images. You can look at it, we have some stuff in there, that's gonna be nice.

[00:01:22]
So pretty simple right there. Next we need to add this css link, so that we have this beautiful css on here. It's only three lines of css, so I'm gonna go back to my template, go up to the tip of the top, go to the head, add that wonderful piece of code right there.

[00:01:37]
If you wanna use the course website, go for it. There we go, and we also have this little beautiful image that we're gonna be using. I took this directly from the HTMX website, okay? It's my image now, that's mine it's our image, all right? All right, fantastic, I just tried to literally quick, I just typed in colon right Enter on a website.

[00:01:56]
That's not how you copy something, it's just I can't help but to do that, it's just in my head, but just do it, all right? So let's go and let's add that line. What was the line? Sorry, I got completely confused there. All right, so let's go all the way down here, we want to add one more item to this contact.

[00:02:13]
I'm going to add in this beautiful image right here. So let's just see what the image looks like, it's a little loading icon right there. How nice is that little loading icon? Our icon, that is, all right, so I'm gonna add one more item to it. It's gonna call it div class = htmx-indicator.

[00:02:32]
Now that is what that css is for. This is a generalized way to solve this problem, and so you can use this for all indicators, so let's look at that css one more time. If you have indicator on your class, we set your opacity to 0 and we have a transition of 500 milliseconds if it were to become visible.

[00:02:50]
Then remember how there's all those events that happen with htmx? Well, when an element is a part of a request, htmx-request will be added to its class list. So notice that I say this, if one of our parents has an htmx-request than our opacity becomes one. If we have that, our opacity becomes 1, so we can kind of define both possibilities.

[00:03:13]
And so that way we can load an indicator and show it upon request. So now we have that nice delay, everything should be good. So let's refresh it, obviously nothing's there. When I click Delete, What happened? Well, nothing, we didn't actually add the indicator. So let's go back over here.

[00:03:30]
And when we do a delete, I'm gonna add one more attribute here and go hx-indicator =, now we need to have some way to target it. So we'll add a simple id, id = contact indicator, id, yeah, look at that beauty. That is beautiful, isn't it? There we go.

[00:03:51]
We now have, hey, the indicator for this action exists in this location. And so when that happens, it's going to do all the addition of things you needed to do. So pretty nice. So I'm gonna hit Refresh, and now when I hit the Delete, that thing will nicely show up during the duration of the request, and then be removed when it's done.

[00:04:10]
If we look at the actual elements, let's look at the actual elements so we can see what happens here. So, when I hit that delete, notice that htmx-request is just added automatically to that class for you. So you don't have to think about it. It allows you to have these things added and there's actually more classes that we can we can get, which we will get here in just one second.

[00:04:30]
So that is one way to add some level of interactivity. It's good, but it's still, I mean, it's shockingly declarative, right? We pretty much declared exactly how our element behaves, including where our indicator is and how it should behave. So that's nice, but it's still not as good.

[00:04:48]
So now we're gonna add something called a swap delay. So I want you to update your CSS with this small little thing right here, contact.htmx-swapping. It's beautiful, okay. And you could obviously just make this generalized. You could have a single way you do this, or you could have it a unique way for each one.

[00:05:04]
We could use the max height thing, though trying to animate on max height is extremely difficult. And there's all these CSS hacks you have to do just to get height to go downwards. My goodness., I hate CSS sometimes, I just wanna just punch, hate it. Anyways okay so we have contact we have this I'm going to add it to the CSS.

[00:05:23]
So I'm just gonna walk over to the CSS and I'm just gonna paste this little bit in, yes my CSS is clearly a skill issue. So we have this beautiful little piece of CSS right here, so I'm gonna back to this. And now we obviously want to add, I mean, now we're getting into like full front end here.

[00:05:39]
Now we have this nice little class contact on it, so we know how to say, hey, which one's gonna have this. Now, when we do this right here, what's gonna end up happening, let's see, Is that, let's go back here. So now you can see it, this right here, we have a target on it.

[00:06:02]
When the target happens before the swap happens, it adds an additional class htmx swap or swapping. And it's gonna say, hey, we're swapping out this element. So if you need to do something with it, you now have one visual hook in your CSS to do something with it.

[00:06:19]
And it also has something else, which is I can go swap for 500 milliseconds. I want you to just give me 500 milliseconds on this so I can make something pretty myself. So when we go back here, and I click Delete, it will do the whole indication for three seconds and then the swap will happen.

[00:06:38]
We'll do that nice little fade out and then it goes away. Now you imagine again you can do the whole height thing, you can make that too much smoother experience, you can kind of choose what you want to do here. And so it's just another way in which case mix just gives you a bunch of events to tap into.

[00:06:51]
Its kind of your responsibility to go the nine yards on this. And so I don't know I like that, I think it's really, really simple and I think it really shows a great way to make nice tools fairly simple, right? Cuz most of our life is making tools very few things are maintaining very wonderful awesome websites.

[00:07:07]
All the little ancillary things around it you don't need to have an entire monolithic application for just the simple stuff.