How to show a modal dialog after the content update has been finished to avoid 'flicker'

Right now I am showing a modal dialog after a click event like this

phx-click={if @available, do: JS.push("show-details") |> show_modal("modal-details")}

And the handle_event "show-details" is setting up the content of the modal. Of course the client side javascript is way faster than the server side content/DOM patching. So the modal is already visible to the user while the DOM patching is still in progress.

Was thinking to use push and a client side event listener like this:

{:noreply, push_event(state, "showDialog", %{id: "event-#{id}"})}

window.addEventListener("phx:showDialog", (e) => {
   [...]
});

But that way the content setup might still be running
Am I overlooking a (simple) solution or something obvious?