Extract top artists component and lazy load each tab

lib/music_library_web/components/stats_components.ex

@@ -66,51 +66,6 @@ defmodule MusicLibraryWeb.StatsComponents do
     """
   end
 
-  attr :artists, :list, required: true
-
-  def top_artists_by_period(assigns) do
-    ~H"""
-    <div class="mt-4">
-      <div class="space-y-2">
-        <div
-          :for={artist <- @artists}
-          phx-click={
-            artist.artist_musicbrainz_id != "" &&
-              JS.navigate(~p"/artists/#{artist.artist_musicbrainz_id}")
-          }
-          class={[
-            "flex items-center space-x-3 p-2",
-            artist.artist_musicbrainz_id != "" &&
-              "cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800"
-          ]}
-        >
-          <img
-            :if={artist.artist_musicbrainz_id != ""}
-            class="w-12 h-12 rounded-md object-cover"
-            src={~p"/artists/#{artist.artist_musicbrainz_id}/image"}
-            alt={artist.artist_name}
-            onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
-          />
-          <div
-            :if={artist.artist_musicbrainz_id == ""}
-            class="w-12 h-12 rounded-md bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
-          >
-            <.icon name="hero-user" class="w-6 h-6 text-zinc-400" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-400 truncate">
-              {artist.artist_name}
-            </p>
-          </div>
-          <.badge>
-            {artist.play_count}
-          </.badge>
-        </div>
-      </div>
-    </div>
-    """
-  end
-
   def refresh_lastfm_feed_button(assigns) do
     ~H"""
     <button

lib/music_library_web/live/stats_live/index.ex

@@ -6,7 +6,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   import MusicLibraryWeb.StatsComponents
 
   alias MusicLibrary.{Collection, Records, ScrobbleActivity, Wishlist}
-  alias MusicLibraryWeb.StatsLive.TopAlbums
+  alias MusicLibraryWeb.StatsLive.{TopAlbums, TopArtists}
 
   def mount(_params, _session, socket) do
     latest_record = Collection.get_latest_record!()
@@ -29,7 +29,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
      )
      |> assign_counts()
      |> assign_scrobble_activity(recent_tracks)
-     |> assign_top_artists()
      |> assign(
        scrobble_activity_mode: "albums",
        latest_record: latest_record,
@@ -87,7 +86,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
 
     {:noreply,
      socket
-     |> assign_top_artists()
      |> assign_scrobble_activity(recent_tracks)}
   end
 
@@ -128,22 +126,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     )
   end
 
-  defp assign_top_artists(socket) do
-    timezone = socket.assigns.timezone
-    current_time = DateTime.utc_now()
-
-    assign_async(socket, :top_artists, fn ->
-      top_artists =
-        ScrobbleActivity.get_top_artists_by_periods(
-          limit: 10,
-          current_time: current_time,
-          timezone: timezone
-        )
-
-      {:ok, %{top_artists: top_artists}}
-    end)
-  end
-
   # The Tailwind build step requires all needed classes to be explicitly referenced
   # in the source code, and not dynamically generated. This implies that one cannot
   # (for example) interpolate a number in a class name.

lib/music_library_web/live/stats_live/index.html.heex

@@ -70,38 +70,7 @@
 
 <div>
   <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
-    <div>
-      <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-        {gettext("Top Artists")}
-      </h1>
-      <.async_result :let={top_artists} assign={@top_artists}>
-        <:loading>
-          <div class="h-192 flex items-center justify-center">
-            <.loading />
-          </div>
-        </:loading>
-        <.tabs class="mt-4">
-          <.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
-            <:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
-            <:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
-            <:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
-            <:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
-          </.tabs_list>
-          <.tabs_panel active name="top_artists_last_30_days">
-            <.top_artists_by_period artists={top_artists.last_30_days} />
-          </.tabs_panel>
-          <.tabs_panel name="top_artists_last_90_days">
-            <.top_artists_by_period artists={top_artists.last_90_days} />
-          </.tabs_panel>
-          <.tabs_panel name="top_artists_last_365_days">
-            <.top_artists_by_period artists={top_artists.last_365_days} />
-          </.tabs_panel>
-          <.tabs_panel name="top_artists_all_time">
-            <.top_artists_by_period artists={top_artists.all_time} />
-          </.tabs_panel>
-        </.tabs>
-      </.async_result>
-    </div>
+    <TopArtists.live id="top-artists" timezone={@timezone} />
     <TopAlbums.live id="top-albums" timezone={@timezone} />
   </div>
 </div>

lib/music_library_web/live/stats_live/top_artists.ex

@@ -0,0 +1,158 @@
+defmodule MusicLibraryWeb.StatsLive.TopArtists do
+  use MusicLibraryWeb, :live_component
+
+  alias MusicLibrary.ScrobbleActivity
+
+  def live(assigns) do
+    ~H"""
+    <.live_component module={__MODULE__} {assigns} id={@id} />
+    """
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
+        {gettext("Top Artists")}
+      </h1>
+      <.tabs class="mt-4">
+        <.tabs_list active_tab={name_from_period(@period)} variant="segmented">
+          <:tab
+            class="flex-1"
+            name="top_artists_last_30_days"
+            phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
+            phx-target={@myself}
+          >
+            {gettext("Last 30 days")}
+          </:tab>
+          <:tab
+            class="flex-1"
+            name="top_artists_last_90_days"
+            phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
+            phx-target={@myself}
+          >
+            {gettext("Last 90 days")}
+          </:tab>
+          <:tab
+            class="flex-1"
+            name="top_artists_last_365_days"
+            phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
+            phx-target={@myself}
+          >
+            {gettext("Last year")}
+          </:tab>
+          <:tab
+            class="flex-1"
+            name="top_artists_all_time"
+            phx-click={JS.push("set_period", value: %{period: "all_time"})}
+            phx-target={@myself}
+          >
+            {gettext("All time")}
+          </:tab>
+        </.tabs_list>
+        <.async_result :let={top_artists} assign={@top_artists}>
+          <:loading>
+            <div class="h-182 flex items-center justify-center">
+              <.loading />
+            </div>
+          </:loading>
+          <.top_artists_by_period artists={top_artists} />
+        </.async_result>
+      </.tabs>
+    </div>
+    """
+  end
+
+  defp name_from_period(period), do: "top_artists_#{period}"
+
+  @impl true
+  def mount(socket) do
+    {:ok,
+     socket
+     |> assign(:period, :last_30_days)}
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_top_artists()}
+  end
+
+  @impl true
+  def handle_event("set_period", %{"period" => period}, socket) do
+    {:noreply,
+     socket
+     |> assign(:period, String.to_existing_atom(period))
+     |> assign_top_artists()}
+  end
+
+  attr :artists, :list, required: true
+
+  def top_artists_by_period(assigns) do
+    ~H"""
+    <div class="mt-4">
+      <div class="space-y-2">
+        <div
+          :for={artist <- @artists}
+          phx-click={
+            artist.artist_musicbrainz_id != "" &&
+              JS.navigate(~p"/artists/#{artist.artist_musicbrainz_id}")
+          }
+          class={[
+            "flex items-center space-x-3 p-2",
+            artist.artist_musicbrainz_id != "" &&
+              "cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800"
+          ]}
+        >
+          <img
+            :if={artist.artist_musicbrainz_id != ""}
+            class="w-12 h-12 rounded-md object-cover"
+            src={~p"/artists/#{artist.artist_musicbrainz_id}/image"}
+            alt={artist.artist_name}
+            onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+          />
+          <div
+            :if={artist.artist_musicbrainz_id == ""}
+            class="w-12 h-12 rounded-md bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
+          >
+            <.icon name="hero-user" class="w-6 h-6 text-zinc-400" />
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-400 truncate">
+              {artist.artist_name}
+            </p>
+          </div>
+          <.badge>
+            {artist.play_count}
+          </.badge>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  defp assign_top_artists(socket) do
+    %{timezone: timezone, period: period} = socket.assigns
+    current_time = DateTime.utc_now()
+
+    assign_async(
+      socket,
+      :top_artists,
+      fn ->
+        top_artists =
+          ScrobbleActivity.get_top_artists_by_period(
+            limit: 10,
+            current_time: current_time,
+            timezone: timezone,
+            period: period
+          )
+
+        {:ok, %{top_artists: top_artists}}
+      end,
+      reset: true
+    )
+  end
+end