GOAL
In one of my practice projects, I have a list of items that are stored in a Postgres database and displayed as <li></li> items in the UI. When a user requests an item to be deleted, the item should be deleted from the database and removed from the UI with a certain animation.

CURRENT SOLUTION
My current solution is to first animate out the item from the UI and on completion send a deletion request to the LiveView server. If deletion fails, the item is animated back in.

Specifically:

<!-- HTML page -->
<button class="warning" phx-click={JS.dispatch("delete-task")} data-id={@id}>Delete</button>

// JS Mounted Hook
export default Hooks = {}

Hooks.CustomEventListeners = {
  mounted() {
  
    window.addEventListener('delete-task', e => {
      const task = e.detail.dispatcher
      const taskId = task.dataset.id
      if (confirm('Please confirm you want to delete this task.')) {
        this.animateOut(taskId)
        setTimeout(() => this.pushEvent('delete', {id: taskId}), this.ANIMATION_DURATION)
      } else {
        const target = document.querySelector(`#task-${taskId}`)
        const event = new Event('cancel-menu', {bubbles: true, cancelable: true})
        target.dispatchEvent(event)
      }
    })

  },
  ANIMATION_DURATION: 500,
  animateOut(id) {
    const task = document.querySelector(`#task-${id}`)
    const targetHeight = task.offsetHeight
    task.animation = task.animate(
      [
        {height: `${targetHeight}px`, transform: 'none', margin: '8px 0px'},
        {height: '0px', transform: 'rotateY(-90deg)', margin: '-4px 0px'}
      ],
      {
        duration: this.ANIMATION_DURATION,
        easing: 'cubic-bezier(.36, -0.64, .34, 1.76)',
        fill: 'both'
      }
    )
  }
}

# LiveView

  def mount(_params, _session, socket) do
    if connected?(socket), do: Tasks.subscribe()

    socket =
      socket
      |> assign(...)

    {:ok, socket}
  end

  def handle_info({:task_deleted, task}, socket) do
    tasks =
      socket.assigns[:tasks]
      |> Enum.filter(fn t -> t.id != task.id end)

    socket =
      socket
      |> assign(tasks: tasks)
    {:noreply, socket}
  end

  def handle_event("delete", %{"id" => id}, socket) do
    case Tasks.delete_task_by_id(id) do
      {:ok, _} ->
        socket =
          socket
          |> put_flash(:info, "Task deleted.")
        {:noreply, socket}
      {_, _} ->
        socket =
          socket
          |> put_flash(:error, "Could not delete task.")
          |> push_redirect(to: "/", replace: true)
        {:noreply, socket}
    end
  end

PREFERRED SOLUTION
It bugs me, however, that I haven’t been able to figure out a way to reverse the order: first delete the item from the database, and in case of success, animate the UI element out. I would like to master the control over LiveView, in combination with JavaScript, to be able to solve this, and similar, problems.

In a JS-only application you would be able to separate the database deletion and the removal of the corresponding element from the DOM. I haven’t figured out how to do the equivalent with LiveView. Since there isn’t a thread blocking beforeDestroy hook, I got the impression it might not be in the stars altogether at this point. But I love to be proven wrong.

Curious to your ideas…