phoenix_live_view
phoenix_live_view copied to clipboard
The inability to differentiate b/w transition when item is removed and transition when its container is removed
Note: this is not a bug, but AFAIK a lack of means to properly address this very common use case by using strictly LiveView JS
commands.
The UC: We have a container component, say a stream, with items. We need to transition away the items when deleted individually, but we also need no transition taking place when navigating to another page or when having the container component/element itself removed for any reason.
AFAIK, the current options at hand are as follows (and I hope I am missing something):
a) We can set the phx-remove
with a JS.hide
transition for the items and another phx-remove
for the container with its own JS.hide
transition set to duration and time of 1 or 0ms to suppress the transition effect of the children; OR
b) We can try having no phx-remove
on items and use stream_delete
instead of stream_delete_by_dom_id
and thus supply the item transition phx-remove
(haven't tried this one yet, but it should work judging by the docs); OR
c) We can have the items have a phx-remove
with the deletion transition that is contingent on a flag (an assign).
The issue is that:
a) only suppresses the transition effect of the items but it still preserves the delay resulting from their transitions thus making it look as if LiveView is doing something, while it's only waiting for the suppressed transition to be over;
b) is a problem because we usually don't maintain the state of each streamed item as a whole (for the sole purpose to use it with the stream_delete
function) and this approach would force us to do so - thus defying the very stateless intent of the streams;
c) is just a hack that can only work with on-page controls and will not work with the back button or page refresh, as it can only be done so that the individual items' phx-remove
is set to the deletion transition by default, while the flag is there to remove this prior to a navigation (and this phx-remove
switching need be done in javascript, e.g. AlpineJS).
In my view, the issue can be solved by either introducing a JS-side state mechanism (that can be set at the container level and acted upon at the item level) OR by simply adding an option with a one-off phx-remove
definition to the stream_delete_by_dom_id
.
Again, I hope I'm being wrong in assessing the possibilities at hand.