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 @@
{gettext("Top Artists")}
- <.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 class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}
- <:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}
- <:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}
-
- <.tabs_panel active name="top_artists_last_30_days">
- <.top_artists_by_period artists={@top_artists.last_30_days} />
-
- <.tabs_panel name="top_artists_last_90_days">
- <.top_artists_by_period artists={@top_artists.last_90_days} />
-
- <.tabs_panel name="top_artists_last_365_days">
- <.top_artists_by_period artists={@top_artists.last_365_days} />
-
- <.tabs_panel name="top_artists_all_time">
- <.top_artists_by_period artists={@top_artists.all_time} />
-
-
+ <.async_result :let={top_artists} assign={@top_artists}>
+ <:loading>
+
+ <.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 class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}
+ <:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}
+ <:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}
+
+ <.tabs_panel active name="top_artists_last_30_days">
+ <.top_artists_by_period artists={top_artists.last_30_days} />
+
+ <.tabs_panel name="top_artists_last_90_days">
+ <.top_artists_by_period artists={top_artists.last_90_days} />
+
+ <.tabs_panel name="top_artists_last_365_days">
+ <.top_artists_by_period artists={top_artists.last_365_days} />
+
+ <.tabs_panel name="top_artists_all_time">
+ <.top_artists_by_period artists={top_artists.all_time} />
+
+
+
{gettext("Top Albums")}
- <.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 class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}
- <:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}
- <:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}
-
- <.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 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 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 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}
- />
-
-
+ <.async_result :let={top_albums} assign={@top_albums}>
+ <:loading>
+
+ <.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 class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}
+ <:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}
+ <:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}
+
+ <.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 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 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 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}
+ />
+
+
+