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.
