Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
DaTrader opened this issue Apr 3, 2024 · 0 comments

Comments

@DaTrader
Copy link

DaTrader commented Apr 3, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant