phoenix_live_view icon indicating copy to clipboard operation
phoenix_live_view copied to clipboard

The inability to differentiate b/w transition when item is removed and transition when its container is removed

Open DaTrader opened this issue 10 months ago • 0 comments

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.

DaTrader avatar Apr 03 '24 09:04 DaTrader