LiveBulkAsync is a small library that extends LiveView’s async support to work with LiveComponent’s update_many function.

My main use case for it is to load columns data in a table asynchronously. Imagine that you have a table that contains a column which data takes time to load (maybe it is from an external API, or it is an expensive DB query).

Using LiveBulkAsync you can leverage LiveComponent’s update_many function to avoid N + 1 issues and still do the load without blocking the component.

The API tries to mimic the LV’s async API as much as possible and have the same guarantees.

Here’s the equivalent to start_async:

defmodule MyComponent do
  @moduledoc false

  use Phoenix.LiveComponent

  def update_many(assigns_and_sockets) do
    assigns_and_sockets
    |> Enum.map(fn {assigns, socket} ->
      socket |> assign(assigns) |> assign(loading?: true)
    end)
    |> start_many_async(:content, &load/0)
  end

  def handle_async(:content, {:ok, content}, socket) do
    {:noreply, assign(socket, loading?: false, content: content)}
  end

  def handle_async(:content, {:exit, reason}, socket) do
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <div id={@id}>
      <div :if={@loading?}>loading...</div>
      <div :if={not @loading?}>{@content}</div>
    </div>
    """
  end

  defp load! do
    # Load something here
    ["content 1", "content 2"]
  end
end

And here’s the equivalent to assing_async:

defmodule MyComponent do
  @moduledoc false

  use Phoenix.LiveComponent

  def update_many(assigns_and_sockets) do
    assigns_and_sockets
    |> Enum.map(fn {assigns, socket} ->
      socket |> assign(assigns) |> assign(loading?: true)
    end)
    |> assign_many_async(:content, fn -> load!() end)
  end

  def render(assigns) do
    ~H"""
    <div id={@id}>
      <.async_result :let={content} assign={@content}>
      <:loading>Loading...</:loading>
      <:failed :let={reason}><pre>{inspect(reason)}</pre></:failed>
        <div>{content}</div>
      </.async_result>
    </div>
    """
  end

  defp load! do
    # Load something here
    {:ok, %{content: ["content 1", "content 2"]}}
  end
end

For more information you can check its repo or hex package.