JS.show() race condition

[silverdr]

Environment

• Elixir version (elixir -v): Elixir 1.17.3 (compiled with Erlang/OTP 27)
• Phoenix version (mix deps): phoenix 1.7.14
• Phoenix LiveView version (mix deps): phoenix_live_view 1.0.0-rc.6
• Operating system: GNU/Linux, macOS 14.6.1
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome and derivatives (Brave, Chromium), Firefox, Safari
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

When using JS.show() with animated transition

@keyframes fade-in-scale {
	0% {
		transform: scale(0.4) translateY(25px);
		opacity: 0;
	}

	90% {
		transform: scale(1.05) translateY(-3px);
		opacity: 0.9;
	}

	100%{
		transform: scale(1.0) translateY(0px);
		opacity: 1;
	}
}

.fade-in-scale {
	animation-direction: normal;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	animation-name: fade-in-scale;
}

sometimes the element pops-up BEFORE the transition animation starts, then disappears and only then animates. Video showing the problem:

https://cld.silverdr.com/s/z8KbZkCDGw8Ffyx

Expected behavior

The transition flow is undisturbed every time.

The relevant elixirforum thread:
https://elixirforum.com/t/liveview-js-show-hide-race-condition/66405/

The Pull Request with a quick fix.

#3455

Please note that I am not familiar with the codebase so can't guarantee that it is the most "correct" way to deal with the problem.