From 1492b197ce397ba205d8797a5a3a8ff8ab014b49 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 7 Jul 2025 10:19:47 +0100
Subject: [PATCH] Make top albums and artists async

---
 .../live/stats_live/index.ex                  |  32 +++--
 .../live/stats_live/index.html.heex           | 126 ++++++++++--------
 2 files changed, 88 insertions(+), 70 deletions(-)

diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index 43bd34e3..c994bc2d 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -133,28 +133,32 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     timezone = socket.assigns.timezone
     current_time = DateTime.utc_now()
 
-    top_albums =
-      ScrobbleActivity.get_top_albums_by_periods(
-        limit: 10,
-        current_time: current_time,
-        timezone: timezone
-      )
+    assign_async(socket, :top_albums, fn ->
+      top_albums =
+        ScrobbleActivity.get_top_albums_by_periods(
+          limit: 10,
+          current_time: current_time,
+          timezone: timezone
+        )
 
-    assign(socket, top_albums: top_albums)
+      {:ok, %{top_albums: top_albums}}
+    end)
   end
 
   defp assign_top_artists(socket) do
     timezone = socket.assigns.timezone
     current_time = DateTime.utc_now()
 
-    top_artists =
-      ScrobbleActivity.get_top_artists_by_periods(
-        limit: 10,
-        current_time: current_time,
-        timezone: timezone
-      )
+    assign_async(socket, :top_artists, fn ->
+      top_artists =
+        ScrobbleActivity.get_top_artists_by_periods(
+          limit: 10,
+          current_time: current_time,
+          timezone: timezone
+        )
 
-    assign(socket, top_artists: top_artists)
+      {:ok, %{top_artists: top_artists}}
+    end)
   end
 
   # The Tailwind build step requires all needed classes to be explicitly referenced
diff --git a/lib/music_library_web/live/stats_live/index.html.heex b/lib/music_library_web/live/stats_live/index.html.heex
index 79b0b506..e3dc5637 100644
--- a/lib/music_library_web/live/stats_live/index.html.heex
+++ b/lib/music_library_web/live/stats_live/index.html.heex
@@ -74,67 +74,81 @@
       <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="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 :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>
     <div>
       <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
         {gettext("Top Albums")}
       </h1>
-      <.tabs class="mt-4">
-        <.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
-          <:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
-          <:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
-          <:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
-          <:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
-        </.tabs_list>
-        <.tabs_panel active name="top_albums_last_30_days">
-          <.top_albums_by_period
-            albums={@top_albums.last_30_days}
-            collected_releases={@top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_releases}
-          />
-        </.tabs_panel>
-        <.tabs_panel name="top_albums_last_90_days">
-          <.top_albums_by_period
-            albums={@top_albums.last_90_days}
-            collected_releases={@top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_releases}
-          />
-        </.tabs_panel>
-        <.tabs_panel name="top_albums_last_365_days">
-          <.top_albums_by_period
-            albums={@top_albums.last_365_days}
-            collected_releases={@top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_releases}
-          />
-        </.tabs_panel>
-        <.tabs_panel name="top_albums_all_time">
-          <.top_albums_by_period
-            albums={@top_albums.all_time}
-            collected_releases={@top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_releases}
-          />
-        </.tabs_panel>
-      </.tabs>
+      <.async_result :let={top_albums} assign={@top_albums}>
+        <:loading>
+          <div class="h-192 flex items-center justify-center">
+            <.loading />
+          </div>
+        </:loading>
+        <.tabs class="mt-4">
+          <.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
+            <:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
+            <:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
+            <:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
+            <:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
+          </.tabs_list>
+          <.tabs_panel active name="top_albums_last_30_days">
+            <.top_albums_by_period
+              albums={top_albums.last_30_days}
+              collected_releases={top_albums.collected_releases}
+              wishlisted_releases={top_albums.wishlisted_releases}
+            />
+          </.tabs_panel>
+          <.tabs_panel name="top_albums_last_90_days">
+            <.top_albums_by_period
+              albums={top_albums.last_90_days}
+              collected_releases={top_albums.collected_releases}
+              wishlisted_releases={top_albums.wishlisted_releases}
+            />
+          </.tabs_panel>
+          <.tabs_panel name="top_albums_last_365_days">
+            <.top_albums_by_period
+              albums={top_albums.last_365_days}
+              collected_releases={top_albums.collected_releases}
+              wishlisted_releases={top_albums.wishlisted_releases}
+            />
+          </.tabs_panel>
+          <.tabs_panel name="top_albums_all_time">
+            <.top_albums_by_period
+              albums={top_albums.all_time}
+              collected_releases={top_albums.collected_releases}
+              wishlisted_releases={top_albums.wishlisted_releases}
+            />
+          </.tabs_panel>
+        </.tabs>
+      </.async_result>
     </div>
   </div>
 </div>