Make top albums and artists async

lib/music_library_web/live/stats_live/index.ex

@@ -133,6 +133,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     timezone = socket.assigns.timezone
     current_time = DateTime.utc_now()
 
+    assign_async(socket, :top_albums, fn ->
       top_albums =
         ScrobbleActivity.get_top_albums_by_periods(
           limit: 10,
@@ -140,13 +141,15 @@ defmodule MusicLibraryWeb.StatsLive.Index do
           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()
 
+    assign_async(socket, :top_artists, fn ->
       top_artists =
         ScrobbleActivity.get_top_artists_by_periods(
           limit: 10,
@@ -154,7 +157,8 @@ defmodule MusicLibraryWeb.StatsLive.Index do
           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

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

@@ -74,6 +74,12 @@
       <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>
@@ -82,23 +88,30 @@
             <: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} />
+            <.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} />
+            <.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} />
+            <.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} />
+            <.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>
+      <.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>
@@ -108,33 +121,34 @@
           </.tabs_list>
           <.tabs_panel active name="top_albums_last_30_days">
             <.top_albums_by_period
-            albums={@top_albums.last_30_days}
+              albums={top_albums.last_30_days}
-            collected_releases={@top_albums.collected_releases}
+              collected_releases={top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_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}
+              albums={top_albums.last_90_days}
-            collected_releases={@top_albums.collected_releases}
+              collected_releases={top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_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}
+              albums={top_albums.last_365_days}
-            collected_releases={@top_albums.collected_releases}
+              collected_releases={top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_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}
+              albums={top_albums.all_time}
-            collected_releases={@top_albums.collected_releases}
+              collected_releases={top_albums.collected_releases}
-            wishlisted_releases={@top_albums.wishlisted_releases}
+              wishlisted_releases={top_albums.wishlisted_releases}
             />
           </.tabs_panel>
         </.tabs>
+      </.async_result>
     </div>
   </div>
 </div>