Playing with this further I explored using CSS animation-delay. A one-word change in core_components.ex:
def show(js \\ %JS{}, selector) do
JS.show(js,
to: selector,
time: 10300, # <-- animation duration + delay
transition:
{"transition-all transform ease-out duration-300 delay-[10s]", # <-- delay added here
"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
"opacity-100 translate-y-0 sm:scale-100"}
)
end
Note I needed to account for the delay in the time option for JS.show otherwise the animation is cut short.
The above does delay showing the error message when I call liveSocket.disconnect() on the browser console, but unfortunately after calling liveSocket.connect() the animation is not interrupted, so bringing back the effect of a quick flash of the flash message (just this time after a long delay).
Maybe this is a dead-end, but I wanted to document here anyway. I seem to be able to “cancel” the JS.show calling liveSocket.transitions.reset() but with a side-effect that next time I disconnect the flash message appears immediately.
