Load release tracks async

lib/music_library_web/live/collection_live/show.ex

@@ -27,7 +27,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       Records.subscribe(record_id)
     end
 
-    {:ok, socket}
+    {:ok, assign(socket, :release_with_tracks, nil)}
   end
 
   @impl true
@@ -37,11 +37,6 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
     socket =
       if record.selected_release_id do
         socket
-        |> assign_async(:release_with_tracks, fn ->
-          with {:ok, release} <- MusicBrainz.get_release(record.selected_release_id) do
-            {:ok, %{release_with_tracks: MusicBrainz.Release.from_api_response(release)}}
-          end
-        end)
       else
         socket
       end
@@ -121,6 +116,18 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
     end
   end
 
+  def handle_event("load_release_with_tracks", _params, socket) do
+    selected_release_id = socket.assigns.record.selected_release_id
+
+    {:noreply,
+     socket
+     |> assign_async(:release_with_tracks, fn ->
+       with {:ok, release} <- MusicBrainz.get_release(selected_release_id) do
+         {:ok, %{release_with_tracks: MusicBrainz.Release.from_api_response(release)}}
+       end
+     end)}
+  end
+
   @impl true
   def handle_info({MusicLibraryWeb.FormComponent, {:saved, record}}, socket) do
     {:noreply, assign(socket, :record, record)}

lib/music_library_web/live/collection_live/show.html.heex

@@ -278,10 +278,11 @@
   :if={@record.selected_release_id}
   id="tracks-sheet"
   placement="right"
+  on_open={JS.push("load_release_with_tracks")}
 >
   <h3 class="text-lg font-semibold mb-4">{gettext("Tracks")}</h3>
 
-  <div class="space-y-4">
+  <div :if={@release_with_tracks} class="space-y-4">
     <.async_result :let={release_with_tracks} assign={@release_with_tracks}>
       <:loading>
         <span class="sr-only">{gettext("Loading release with tracks")}</span>