Closing a Modal only after server side operation was successful

The easiest way is to annotate the socket with push_navigate and reload the same view they’re already on.

case perform_action(params) do
  {:ok, _} ->
    socket
    |> put_flash(:info, "Saved new info successfully!")
    |> push_navigate(to: ~p"/the/route")

  {:error, changeset} ->
    assign(socket, :form, to_form(changeset)}
end

Here’s an alternative that takes advantage of LiveView’s state management and element bindings:

<button phx-click={JS.push("edit")}>Edit</button>
<.modal 
  id="user-form"
  phx-mounted={show_modal()}
  phx-remove={hide_modal()}
  :if={@form}></.modal>

In your LiveView:

def handle_event("edit", _params, socket) do
  {:noreply, assign(socket, :form, build_form())}
end

def handle_event("update", %{"user" => user_params}, socket) do
  # after update
  {:noreply, assign(socket, :form, nil)}
end

Setting/unsetting the form will show and hide the modal, and you can use phx-mounted and phx-remove to handle CSS transitions (LiveView has some magic to wait until the transitions have completed before removing the element from the DOM)

I went with a different approach as outlined in this fly.io article.

The idea is basically to

1. embed some JS as an attribute on the DOM element
2. push an event from the backend to trigger that JS, passing the target DOM and attribute
3. Have an event listener on the frontend (app.js) that searches the DOM element, finds the attribute and executes the embedded JS.