`useTransition`: out of sync when used multiple times quickly about stimulus-use

[hms]

I just bumped into this too.

It looks like some transition classes are being left on the target rather than being removed if one cycles the transition too fast. Once that happens, there is no way to recover other than refreshing the page (i.e., follow on requests to transition don't clear the lingering classes from the previous cycle)

@pySilver while ugly, ugly, ugly, I added a cleanup() as the first step in any functions that trigger a transition. The cleanup() basically does a target.classList.remove(...AllOfTheTransitionClasses) which seems to solve for now.

[pySilver]

@hms I've switched to el-transition which has promise support and had no issues since then.

[marcoroth]

Is there any chance we can improve this in Stimulus Use as well, so that all people can benefit from it?

[hms]

@marcoroth I hate like hell asking for even more of your help given how much you contribute here and elsewhere, but the JS involved is a little over my head.

I've tried adding useThrottle to my code that triggers a transition with no luck. My cleanup() hack seems to work no matter how hard I push state changes. Part of the problem, at least in my code, is I'm also using useHotKeys -- so I have lots of places in my Stimulus controller where a state change could be asked for -- and it doesn't look like throttling is a solution.

If I can find some time, I can try with el-transition to see if their promise based solution is all we need. If that works, it would suggest a direction for useTransition -- and possibly a bunch of other use* functions.

If I can help, I'm willing to try -- but I'll need you to point me in the right directions given I'll be learning as I go.

Hal