> So that way, if you're on fast broadband, you get a near instantaneous swap of the heart icon (no loading indicator needed). Otherwise, if you're on a slower connection , the loading indicator will be shown. > @User And this is the rub! 🙂 ..."near instantaneous" is the problem. In my original post I tried to explain... > And I would like to enforce a min 1 sec application of the load state, ...as it otherwise looks very jittery and glitchy when the loading state is flashed for a few ms. > > You can see a cleaned up version of it here, but where I am using Alpine to simulate the network request, and to enforce a small delay that makes it look better. If you wish to witness the problem first-hand, take my 1000ms delay and move it down to 100. So this is the literal definition of a 1st world problem. When the internet is too good, the animation transition looks like garbage. This is what I'm trying to fix, just to find some way to keep

.htmx-request

applied to my css for a minimum of 1 sec.

Ah, okay. Have you tried utilising css transitions?

I thought about it... but don't see how.

Yeah, thinking about it myself now. Perhaps @User might have some ideas once he's online. Sorry I can't be of more help right now.

No worries! Thanks for thinking about it. Maybe something occurs to you later.

Also for the record, a css transition will punish everyone.

Or apply the 1 sec penalty to all connections.

I'd take a css transition over a JS transition any day.

> Or apply the 1 sec penalty to all connections. @User Let's try to avoid this 🙂

an ideal solution would start a clock on

.htmx-request

and just not "release" it until a min of 1 sec had passed.

then there are no jumps or hiccups ... because the css animation is a circular disc, it is really hard to see how we can time that transition in css while also using

.htmx-request

But let's see! 🙂

I just looked at your pen and tbh, I think it looks fine when setting the resolve time to 0

@User should a user be able to click the like button again during the transition?

> I just looked at your pen and tbh, I think it looks fine when setting the resolve time to 0 @User but the reality is that a fast connection will still show it for a few hundred milliseconds of course 😉

> @User should a user be able to click the like button again during the transition? @User Nope. Under most circumstances it wouldn't even occur to the user to click it a second time within the ~ 1 second it will hopefully take to complete the xhr request.

OK, so the logic is "animate over 1s or the time of the request, whichever is more"

Typically there is one animation for the request, and then a finishing animation

I need to think about how to accomplish this generally

I'd like for it to be doable w/ pure htmx

> > I'd like for it to be doable w/ pure htmx > @User So would I. 😉

@User Quick heads up on the namespaced events thing. Alpine JS nows supports the use of a .camel modifier which allows it to listen to htmx events as they are now. There's a PR in Alpine to fix a bug with the modifier which is going to allow this to work:

x-on:htmx:before-request.camel.window="console.log('Hello!')"

@User Yeah that's an unfortunate shortcoming of Alpine, although it will still be possible to make it work as per this PR. Hyperscript's syntax makes this a non-issue.

_="on htmx:afterSettle log 'Settled!'"

https://htmx.org/docs#hyperscript

I am absolutely jonesing to get back on hyperscript.

You guys are mixing htmx, Hyperscript and Alpine?! Tbh, at that point, I think I'd rather use React...

Well ... I'm mixing htmx and (Python) dominate to try to make something ... hmm .... let's just call it interesting right now. I'll let you know how I get on.

> You guys are mixing htmx, Hyperscript and Alpine?! Tbh, at that point, I think I'd rather use React... @User htmx + (Hyperscript or Alpine)

Yeah, I can see that being useful, but Alpine still means lots of JavaScript really

> Yeah, I can see that being useful, but Alpine still means lots of JavaScript really @bright-honey-15993 the way I use Alpine is with html attributes only, although those few times I do need to inline some JS does feel pretty nasty.

Yeah, I watched some of Jeffrey Way's intro on it, and was like..."why?!"