AodhanHayter

Animating list items with LiveView streams

I have a list (LiveView stream) which on mount is populated, it is then subsequently prepended to via PubSub using stream.insert. When prepending a new item to the list I want to nicely animate it’s entry.

I’m able to add this animation using phx-mounted and JS.transition, but my problem is the initial lifecycle mounts as it causes this animation to flash for the server rendered list on the initial mounts. I only want this animation to occur when a new item comes in after the initial mount.

My question is if anyone has figured out an elegant way to handle this. My first thought is counting renders and conditionally applying the transition but was hoping for a more declarative way. The markup is as follows…

<ul id="jobs" phx-update="stream" class="p-4 flex flex-col gap-4">
  <li
    :for={{id, j} <- @streams.jobs}
    id={id}
    class="border-2 p-2 h-fit flex flex-row justify-between overflow-hidden"
    phx-mounted={
        JS.transition(
           {"first:ease-in duration-500", "first:opacity-0 first:p-0 first:h-0", "first:opacity-100"},
           time: 500
         )
    }
  >
    <p>Name: <%= j.name %></p>
    <p>ID: <%= j.job_id %></p>
    <p>Status: <%= j.state %></p>
  </li>
</ul>

7 comments

/phoenix #liveview #animation

0 1052 7

2025-11-02 12:55:40 UTC

Marked As Solved

tomg

You could do something like this:

<li
    :for={{id, j} <- @streams.jobs}
    id={id}
    class="border-2 p-2 h-fit flex flex-row justify-between overflow-hidden"
    phx-mounted={
        @insert && 
        JS.transition(
           {"first:ease-in duration-500", "first:opacity-0 first:p-0 first:h-0", "first:opacity-100"},
           time: 500
         )
    }
  >

Where you assign insert to false on initial mount and true before the first insert.

Post #2

Also Liked

ppff01

While struggling with this too, I stumbled upon this thread and thought I should share my solution.

Basically my idea is to trigger UI events from their source (when the server wants to update the stream) and I think it’s less hacky than what’s proposed in this thread.

Here is my handle_info implementation, based on phoenix 1.8 usage of PubSub:

@impl true
  def handle_info({type, url = %URLs.URL{}}, socket) do
    id = "urls-#{url.id}"
    case type do
      :created ->
        if Map.equal?(socket.assigns.filters, %{}) do
          socket =
            socket
            |> stream_insert(:urls, url, at: 0)
            |> push_event("fade_in", %{id: id})
          {:noreply, socket}
        else
          # don't insert the new element if filters don't have default values
          {:noreply, socket}
        end
      :updated ->
        socket =
          socket
          |> stream_insert(:urls, url, update_only: true)
          |> push_event("fade_in", %{id: id})
        {:noreply, socket}
      :deleted ->
        socket =
          socket
          |> push_event("fade_out_and_remove", %{id: id})
        {:noreply, socket}
    end
  end

An important idea is not to call stream_delete on deletion, you’ll see why just below. (By the way this thing with socket.assigns.filters is because I use Flop and keep my filters in assigns to create return_to urls which keep the filtering.)

And here is the hook on each table row:

mounted() {
  this.handleEvent("fade_in", data => {
    if (data.id == this.el.id) {
      this.js().transition(
        this.el,
        ["ease-out duration-200", "opacity-0 scale-95", "opacity-100 scale-100"]
      );
    }
  });
  this.handleEvent("fade_out_and_remove", data => {
    if (data.id == this.el.id) {
      this.js().hide(
        this.el,
        {"transition": ["ease-out duration-200", "opacity-100 scale-100", "opacity-0 scale-95"]}
      );
      setTimeout(() => {
        this.el.remove();
      }, "200");
    }
  });
}

Note that you can’t send an event to a specific hook (or at least I didn’t find out how), so you need to filter its destination directly inside the hook.

About events:

when an element of the stream is added or updated, the server sends an event which triggers a fade_in transition on its table row
when an object is deleted, the server sends an event which triggers a fade_out transition and then deletes the HTML element. This is basically means I re-implemented the UI side of stream_delete without removing the element from the actual stream. But that’s not a big deal in my opinion since it will be refreshed sooner or later. Also note that you could also keep the HTML element, it would be hidden anyway thanks to js().hide().

Hope this helps!

Post #5