Use streams with import component

lib/music_library_web/live/record_live/import_component.ex

@@ -30,32 +30,35 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
         />
       </.simple_form>
       <ul
-        :if={@release_groups !== []}
+        id="release-groups"
+        phx-update="stream"
         role="list"
         class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5"
       >
+        <li
+          id="release-groups-empty"
+          class="only:flex hidden items-center justify-center h-32 text-md text-zinc-500"
+        >
+          {gettext("No results")}
+        </li>
         <.result
-          :for={release_group <- @release_groups}
+          :for={{id, release_group} <- @streams.release_groups}
+          id={id}
           release_group={release_group}
           icon_name={@icon_name}
         />
       </ul>
-      <div
-        :if={@release_groups == []}
-        class="flex items-center justify-center h-32 text-md text-zinc-500"
-      >
-        {gettext("No results")}
-      </div>
     </div>
     """
   end
 
+  attr :id, :string, required: true
+  attr :icon_name, :string, required: true
+  attr :release_group, MusicBrainz.ReleaseGroup, required: true
+
   defp result(assigns) do
     ~H"""
-    <li
+    <li id={@id} class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700">
-      id={"musicbrainz_" <> @release_group.id}
-      class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700"
-    >
       <div class="shrink-0 flex items-center justify-between w-full px-4">
         <div class="min-w-0 flex-auto">
           <h1 class="text-sm leading-6 text-zinc-700 dark:text-zinc-400">
@@ -135,7 +138,10 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
   def mount(socket) do
     {:ok,
      socket
-     |> assign(:release_groups, [])
+     |> stream_configure(:release_groups,
+       dom_id: fn rg -> "musicbrainz_#{rg.id}" end
+     )
+     |> stream(:release_groups, [])
      |> assign(:form, to_form(%{"mb_query" => ""}))}
   end
 
@@ -145,7 +151,7 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
 
     {:noreply,
      socket
-     |> assign(:release_groups, release_groups)
+     |> stream(:release_groups, release_groups, reset: true)
      |> assign(:form, to_form(%{"mb_query" => mb_query}))}
   end
 

priv/gettext/default.pot

@@ -146,7 +146,7 @@ msgstr ""
 msgid "No cover selected"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/import_component.ex:47
+#: lib/music_library_web/live/record_live/import_component.ex:42
 #, elixir-autogen, elixir-format
 msgid "No results"
 msgstr ""
@@ -341,7 +341,7 @@ msgstr ""
 msgid "Scrobble activity"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/import_component.ex:82
+#: lib/music_library_web/live/record_live/import_component.ex:85
 #: lib/music_library_web/live/stats_live/index.html.heex:169
 #, elixir-autogen, elixir-format
 msgid "Choose which format to import"

test/support/fixtures/release_groups_fixtures.ex

@@ -1,16 +1,18 @@
 defmodule MusicLibrary.ReleaseGroupsFixtures do
   @fixtures_folder Path.join([File.cwd!(), "test/support/fixtures"])
 
+  alias MusicBrainz.ReleaseGroup
+
   def release_group_search_results do
     [
-      %{
+      %ReleaseGroup{
         id: "20790e26-98e4-3ad3-a67f-b674758b942d",
         type: :album,
         title: "Marbles",
         artists: "Marillion",
         release: "2004-05-03"
       },
-      %{
+      %ReleaseGroup{
         id: "bf20ac32-a793-3bb4-beff-f7b9bffaca38",
         type: :album,
         title: "Marbles Live",