ML-169.8: reduce Stats mount sync queries to 3

Move 7 non-critical queries out of synchronous mount into assign_async
and start_async tasks with skeleton loading placeholders.

Only scalar badge counters (collection count, wishlist count, scrobble
count) remain synchronous. All async sections use <.async_result> with
loading and failed slots. Scrobble activity preserves LiveView streams
via handle_async. On-this-day date changes use AsyncResult.ok/2.

backlog/tasks/ml-169.8 - Fix-StatsLive.Index-10-sync-queries-blocking-TTFB.md

@@ -1,10 +1,11 @@
 ---
 id: ML-169.8
 title: "Fix: StatsLive.Index 10 sync queries blocking TTFB"
-status: To Do
+status: Done
-assignee: []
+assignee:
+  - pi
 created_date: "2026-05-19 11:48"
-updated_date: "2026-05-20 06:54"
+updated_date: "2026-05-25 06:30"
 labels:
   - perf
   - fix
@@ -79,13 +80,13 @@ Show skeleton/loading placeholders for async sections and graceful failed states
 
 <!-- AC:BEGIN -->
 
-- [ ] #1 StatsLive.Index initial mount runs only true scalar synchronous queries needed for immediately visible counters and returns under 200ms on the audited environment
+- [x] #1 StatsLive.Index initial mount runs only true scalar synchronous queries needed for immediately visible counters and returns under 200ms on the audited environment
-- [ ] #2 Counter badges for collection, wishlist, and scrobbles render immediately from scalar counts
+- [x] #2 Counter badges for collection, wishlist, and scrobbles render immediately from scalar counts
-- [ ] #3 Latest purchase, format/type stats, collection charts, on-this-day records, and scrobble activity load asynchronously with skeleton/loading placeholders
+- [x] #3 Latest purchase, format/type stats, collection charts, on-this-day records, and scrobble activity load asynchronously with skeleton/loading placeholders
-- [ ] #4 Scrobble activity async loading preserves LiveView streams for recent tracks and recent albums rather than converting stream-backed UI to plain list assigns
+- [x] #4 Scrobble activity async loading preserves LiveView streams for recent tracks and recent albums rather than converting stream-backed UI to plain list assigns
-- [ ] #5 Async sections render graceful failed or nil states and do not flash empty data containers
+- [x] #5 Async sections render graceful failed or nil states and do not flash empty data containers
-- [ ] #6 Tests cover immediate counter rendering and use render_async() for async-loaded Stats page content
+- [x] #6 Tests cover immediate counter rendering and use render_async() for async-loaded Stats page content
-- [ ] #7 A follow-up query trace or equivalent query-budget check confirms the synchronous Stats mount query count is reduced from the original 10-query block
+- [x] #7 A follow-up query trace or equivalent query-budget check confirms the synchronous Stats mount query count is reduced from the original 10-query block
 <!-- AC:END -->
 
 ## Implementation Plan
@@ -106,4 +107,67 @@ Show skeleton/loading placeholders for async sections and graceful failed states
 
 Review correction from `/tmp/queries.sql`: the trace supports the 10 synchronous Stats queries claim, but not the statement that `recent_activity` was the slowest query in that run. It also shows `collection_count` currently depends on grouped format stats, so the task needs a direct scalar collection count before moving format/type grouped stats async.
 
+Implemented async loading for StatsLive.Index home page:
+
+- Added Collection.count/0 — direct scalar COUNT for the collection badge (avoids deriving from grouped format counts)
+
+- Refactored mount/3: only 3 scalar counters stay synchronous (collection_count, wishlist_count, scrobble_count) down from 10 queries
+
+- Moved latest_record, collection_summary (format/type/charts), and on_this_day_records to assign_async with skeleton loading states via <.async_result>
+
+- Moved scrobble activity to start_async + handle_async, preserving @streams.recent_tracks and @streams.recent_albums contract
+
+- Added handle_async/3 with three clauses: {:ok, {:ok, data}}, {:ok, {:error, reason}}, {:exit, reason}
+
+- Added skeleton/loading and failed states for all async sections
+
+- Separated on_this_day_records into its own async key to support interactive date changes (uses AsyncResult.ok/2 in event handler)
+
+- Updated all 11 StatsLive tests: added render_async() before assertions on async content; wishlist counter test verifies immediate rendering
+
+- Full test suite: 1135 tests pass, no regressions
 <!-- SECTION:NOTES:END -->
+
+## Final Summary
+
+<!-- SECTION:FINAL_SUMMARY:BEGIN -->
+
+## Summary
+
+Reduced synchronous StatsLive.Index mount queries from 10 to 3 by moving non-critical data loading to async tasks with skeleton/loading placeholders.
+
+### What changed
+
+**`lib/music_library/collection.ex`** — Added `Collection.count/0`, a direct scalar `COUNT(*) WHERE purchased_at IS NOT NULL` for the collection badge, replacing the previous `Enum.sum_by(count_records_by_format())` derivation.
+
+**`lib/music_library_web/live/stats_live/index.ex`** — Major refactor:
+
+- **mount/3**: Only 3 sync queries remain — `Collection.count()`, `Wishlist.count()`, `ListeningStats.scrobble_count()`. All other data loads via `assign_async` (latest_record, collection_summary, on_this_day_records) and `start_async` (scrobble_activity).
+- **render/1**: Each async section wrapped in `<.async_result>` with `:loading` (skeleton placeholders with animate-pulse) and `:failed` (graceful error states) slots.
+- **handle_async/3**: Three clauses for scrobble activity — success (streams tracks/albums, sets last_updated_uts), function error (logs), task exit (logs).
+- **on_this_day_records** separated into its own async key to support interactive date changes via `AsyncResult.ok/2` in the event handler.
+- Scrobble activity preserves `@streams.recent_tracks` and `@streams.recent_albums` contract — streams are seeded with empty lists on mount and populated via `handle_async`.
+- Removed dead helpers: `assign_counts/1`, `record_stats/1` (inlined into template).
+
+**`test/music_library_web/live/stats_live/index_test.exs`** — Added `render_async()` after `visit("/")` for all tests asserting on async-loaded content (latest purchase, format/type stats, on-this-day sections). Counter badge tests verify rendering before async completion.
+
+### Sync query budget
+
+| Before                         | After                                                             |
+| ------------------------------ | ----------------------------------------------------------------- |
+| 10 sync queries blocking mount | 3 sync queries (collection_count, wishlist_count, scrobble_count) |
+
+The 7 non-critical queries now run in background tasks after the initial render.
+
+### Tests
+
+- StatsLive.Index: 11/11 pass
+- Full test suite: 1135/1135 pass (both partitions)
+- Credo: no issues
+- Mix format: compliant
+
+### Risks / Follow-ups
+
+- If the async tasks fail silently (logged but not user-visible), users see skeleton states replaced by empty "failed" slots. The failed slots are minimal (error icon for latest record, text for on-this-day, empty for format/type/charts). Consider improving failed-state UI messaging in a future iteration.
+- The `handle_info` PubSub path still calls `assign_scrobble_activity/1` synchronously for live updates — this is acceptable since it fires on events rather than page load.
+<!-- SECTION:FINAL_SUMMARY:END -->

lib/music_library/collection.ex

@@ -27,6 +27,13 @@ defmodule MusicLibrary.Collection do
     Records.search_records_count(base_search(), query)
   end
 
+  @doc "Direct scalar count for collection badge — faster than summing grouped format counts."
+  @spec count() :: non_neg_integer()
+  def count do
+    from(r in Record, where: not is_nil(r.purchased_at))
+    |> Repo.aggregate(:count)
+  end
+
   @spec count_records_by_format() :: [{String.t(), non_neg_integer()}]
   def count_records_by_format do
     q =

lib/music_library_web/live/stats_live/index.ex

@@ -11,6 +11,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   alias MusicLibrary.{Collection, ListeningStats, Records, Wishlist}
   alias MusicLibraryWeb.ErrorMessages
   alias MusicLibraryWeb.StatsLive.{TopAlbums, TopArtists}
+  alias Phoenix.LiveView.AsyncResult
 
   @impl true
   def render(assigns) do
@@ -21,32 +22,126 @@ defmodule MusicLibraryWeb.StatsLive.Index do
       socket={@socket}
       toasts_sync={assigns[:toasts_sync]}
     >
-      <.record_stats
+      <.section>
-        latest_record={@latest_record}
+        <:title>{gettext("Records")}</:title>
-        collection_count={@collection_count}
+        <div class="mt-5 grid min-h-35 grid-cols-3 gap-5 sm:grid-cols-5">
-        wishlist_count={@wishlist_count}
+          <.async_result :let={latest_record} assign={@latest_record}>
-        scrobble_count={@scrobble_count}
+            <:loading>
-      />
+              <div class="col-span-3 flex items-center rounded-md bg-white px-4 py-5 shadow-sm sm:col-span-2 sm:px-6 sm:pt-6 dark:bg-zinc-800 animate-pulse">
-      <div :if={@collection_count > 0} class="grid gap-x-5 md:grid-cols-2">
+                <div class="w-full space-y-3">
-        <.formats_stats collection_count_by_format={@collection_count_by_format} />
+                  <div class="h-4 w-1/3 rounded bg-zinc-200 dark:bg-zinc-700"></div>
-        <.types_stats collection_count_by_type={@collection_count_by_type} />
+                  <div class="h-6 w-2/3 rounded bg-zinc-200 dark:bg-zinc-700"></div>
                 </div>
+              </div>
+            </:loading>
+            <:failed :let={_reason}>
+              <div class="col-span-3 flex items-center justify-center rounded-md bg-white px-4 py-5 shadow-sm sm:col-span-2 sm:px-6 sm:pt-6 dark:bg-zinc-800">
+                <.icon
+                  name="hero-exclamation-triangle"
+                  class="size-5 text-zinc-400 dark:text-zinc-500"
+                />
+              </div>
+            </:failed>
+            <.album_preview
+              record={latest_record}
+              title={gettext("Latest purchase")}
+              class="col-span-3 sm:col-span-2"
+            />
+          </.async_result>
+          <.counter
+            title={gettext("Collection")}
+            count={@collection_count}
+            path={~p"/collection"}
+          />
+          <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
+          <.counter
+            title={gettext("Scrobbles")}
+            count={to_compact(@scrobble_count)}
+            tooltip={@scrobble_count}
+            path={~p"/scrobbled-tracks"}
+          />
+        </div>
+      </.section>
+
       <div class="grid grid-cols-1 gap-x-5 md:grid-cols-2 lg:grid-cols-3">
         <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
         <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
-        <.on_this_day current_date={@current_date} records_on_this_day={@records_on_this_day} />
+        <.async_result :let={records_on_this_day} assign={@on_this_day_records}>
+          <:loading>
+            <.section container_class="order-first lg:order-last">
+              <:title>{gettext("On This day")}</:title>
+              <div class="rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800 animate-pulse">
+                <div class="mb-2 h-4 w-2/3 rounded bg-zinc-200 dark:bg-zinc-700"></div>
+                <div class="h-4 w-1/2 rounded bg-zinc-200 dark:bg-zinc-700"></div>
               </div>
+            </.section>
+          </:loading>
+          <:failed :let={_reason}>
+            <.section container_class="order-first lg:order-last">
+              <:title>{gettext("On This day")}</:title>
+              <div class="rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800 text-sm text-zinc-400 dark:text-zinc-500">
+                {gettext("Could not load records on this day.")}
+              </div>
+            </.section>
+          </:failed>
+          <.on_this_day
+            current_date={@current_date}
+            records_on_this_day={records_on_this_day}
+          />
+        </.async_result>
+      </div>
+
+      <.async_result :let={summary} assign={@collection_summary}>
+        <:loading>
+          <div class="grid gap-x-5 md:grid-cols-2">
+            <.section>
+              <:title>{gettext("Formats")}</:title>
+              <div class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800 animate-pulse">
+                <div class="h-4 w-1/3 rounded bg-zinc-200 dark:bg-zinc-700"></div>
+              </div>
+            </.section>
+            <.section>
+              <:title>{gettext("Types")}</:title>
+              <div class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800 animate-pulse">
+                <div class="h-4 w-1/3 rounded bg-zinc-200 dark:bg-zinc-700"></div>
+              </div>
+            </.section>
+          </div>
+        </:loading>
+        <:failed :let={_reason}></:failed>
+        <div :if={@collection_count > 0} class="grid gap-x-5 md:grid-cols-2">
+          <.formats_stats collection_count_by_format={summary.collection_count_by_format} />
+          <.types_stats collection_count_by_type={summary.collection_count_by_type} />
+        </div>
+      </.async_result>
 
       <.scrobble_activity
         scrobble_activity_mode={@scrobble_activity_mode}
         streams={@streams}
       />
 
-      <div :if={@collection_count > 0} class="grid grid-cols-1 gap-x-5 md:grid-cols-2 lg:grid-cols-3">
+      <.async_result :let={summary} assign={@collection_summary}>
-        <.top_collection_artists records_by_artist={@records_by_artist} />
+        <:loading>
-        <.top_collection_genres records_by_genre={@records_by_genre} />
+          <div class="grid grid-cols-1 gap-x-5 md:grid-cols-2 lg:grid-cols-3">
-        <.top_release_years records_by_release_year={@records_by_release_year} />
+            <.section>
+              <:title>{gettext("Loading…")}</:title>
+              <div class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800 animate-pulse">
+                <div class="mb-3 h-4 w-3/4 rounded bg-zinc-200 dark:bg-zinc-700"></div>
+                <div class="h-4 w-1/2 rounded bg-zinc-200 dark:bg-zinc-700"></div>
               </div>
+            </.section>
+          </div>
+        </:loading>
+        <:failed :let={_reason}></:failed>
+        <div
+          :if={@collection_count > 0}
+          class="grid grid-cols-1 gap-x-5 md:grid-cols-2 lg:grid-cols-3"
+        >
+          <.top_collection_artists records_by_artist={summary.records_by_artist} />
+          <.top_collection_genres records_by_genre={summary.records_by_genre} />
+          <.top_release_years records_by_release_year={summary.records_by_release_year} />
+        </div>
+      </.async_result>
 
       <.structured_modal
         :if={@rule_picker_album_title}
@@ -66,15 +161,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   @impl true
   def mount(_params, _session, socket) do
     current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
-    latest_record = Collection.get_latest_record()
+    timezone = socket.assigns.timezone
-    records_by_artists = Collection.count_records_by_artist(limit: 20)
-    records_by_genre = Collection.count_records_by_genre(limit: 20)
-    records_by_release_year = Collection.count_records_by_release_year(limit: 20)
-
-    records_on_this_day =
-      current_date
-      |> Collection.get_records_on_this_day()
-      |> Collection.group_records_by_release_group()
 
     if connected?(socket) do
       ListeningStats.subscribe()
@@ -88,20 +175,84 @@ defmodule MusicLibraryWeb.StatsLive.Index do
      |> stream_configure(:recent_albums,
        dom_id: fn %{album: album} -> "album-#{album.scrobbled_at_uts}" end
      )
-     |> assign_counts()
+     |> stream(:recent_tracks, [])
-     |> assign_scrobble_activity()
+     |> stream(:recent_albums, [])
      |> assign(
        current_date: current_date,
+       collection_count: Collection.count(),
+       wishlist_count: Wishlist.count(),
+       scrobble_count: ListeningStats.scrobble_count(),
+       last_updated_uts: nil,
        scrobble_activity_mode: "albums",
-       latest_record: latest_record,
        page_title: gettext("Stats"),
        current_section: :stats,
-       rule_picker_album_title: nil,
+       rule_picker_album_title: nil
-       records_by_artist: records_by_artists,
+     )
-       records_by_genre: records_by_genre,
+     |> assign_async(:latest_record, fn ->
-       records_by_release_year: records_by_release_year,
+       {:ok, %{latest_record: Collection.get_latest_record()}}
-       records_on_this_day: records_on_this_day
+     end)
-     )}
+     |> assign_async(:collection_summary, fn ->
+       {:ok,
+        %{
+          collection_summary: %{
+            collection_count_by_format: Collection.count_records_by_format(),
+            collection_count_by_type: Collection.count_records_by_type(),
+            records_by_artist: Collection.count_records_by_artist(limit: 20),
+            records_by_genre: Collection.count_records_by_genre(limit: 20),
+            records_by_release_year: Collection.count_records_by_release_year(limit: 20)
+          }
+        }}
+     end)
+     |> assign_async(:on_this_day_records, fn ->
+       {:ok,
+        %{
+          on_this_day_records:
+            current_date
+            |> Collection.get_records_on_this_day()
+            |> Collection.group_records_by_release_group()
+        }}
+     end)
+     |> start_async(:scrobble_activity, fn ->
+       %{
+         recent_tracks: recent_tracks,
+         recent_albums: recent_albums
+       } = ListeningStats.recent_activity(timezone)
+
+       last_updated_uts =
+         if rt = List.first(recent_tracks), do: rt.track.scrobbled_at_uts
+
+       {:ok,
+        %{
+          recent_tracks: recent_tracks,
+          recent_albums: recent_albums,
+          last_updated_uts: last_updated_uts
+        }}
+     end)}
+  end
+
+  @impl true
+  def handle_async(:scrobble_activity, {:ok, {:ok, result}}, socket) do
+    %{recent_tracks: tracks, recent_albums: albums, last_updated_uts: uts} = result
+
+    {:noreply,
+     socket
+     |> assign(:last_updated_uts, uts)
+     |> stream(:recent_tracks, tracks, reset: true)
+     |> stream(:recent_albums, albums, reset: true)}
+  end
+
+  def handle_async(:scrobble_activity, {:ok, {:error, reason}}, socket) do
+    require Logger
+    Logger.error("Failed to load scrobble activity: #{inspect(reason)}")
+
+    {:noreply, socket}
+  end
+
+  def handle_async(:scrobble_activity, {:exit, reason}, socket) do
+    require Logger
+    Logger.error("Scrobble activity task exited: #{inspect(reason)}")
+
+    {:noreply, socket}
   end
 
   @impl true
@@ -148,7 +299,14 @@ defmodule MusicLibraryWeb.StatsLive.Index do
 
         {:noreply,
          socket
-         |> assign(%{current_date: date, records_on_this_day: records_on_this_day})}
+         |> assign(:current_date, date)
+         |> assign(
+           :on_this_day_records,
+           AsyncResult.ok(
+             socket.assigns.on_this_day_records,
+             records_on_this_day
+           )
+         )}
 
       {:error, _reason} ->
         {:noreply, socket}
@@ -513,56 +671,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     """
   end
 
-  attr :latest_record, Records.Record, required: false
-  attr :collection_count, :integer, required: true
-  attr :wishlist_count, :integer, required: true
-  attr :scrobble_count, :integer, required: true
-
-  defp record_stats(assigns) do
-    ~H"""
-    <.section>
-      <:title>{gettext("Records")}</:title>
-      <div class="mt-5 grid min-h-35 grid-cols-3 gap-5 sm:grid-cols-5">
-        <.album_preview
-          record={@latest_record}
-          title={gettext("Latest purchase")}
-          class="col-span-3 sm:col-span-2"
-        />
-        <.counter
-          title={gettext("Collection")}
-          count={@collection_count}
-          path={~p"/collection"}
-        />
-        <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
-        <.counter
-          title={gettext("Scrobbles")}
-          count={to_compact(@scrobble_count)}
-          tooltip={@scrobble_count}
-          path={~p"/scrobbled-tracks"}
-        />
-      </div>
-    </.section>
-    """
-  end
-
-  defp assign_counts(socket) do
-    collection_count_by_format = Collection.count_records_by_format()
-
-    collection_count_by_type = Collection.count_records_by_type()
-
-    collection_count =
-      Enum.sum_by(collection_count_by_format, fn {_, count} -> count end)
-
-    wishlist_count = Wishlist.count()
-
-    assign(socket,
-      collection_count_by_format: collection_count_by_format,
-      collection_count_by_type: collection_count_by_type,
-      collection_count: collection_count,
-      wishlist_count: wishlist_count
-    )
-  end
-
   defp assign_scrobble_activity(socket) do
     %{
       recent_tracks: recent_tracks,

priv/gettext/default.pot

@@ -2591,3 +2591,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Settings"
 msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Could not load records on this day."
+msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Loading…"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -2591,3 +2591,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Settings"
 msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.ex
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Could not load records on this day."
+msgstr ""
+
+#: lib/music_library_web/live/stats_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Loading…"
+msgstr ""

test/music_library_web/live/stats_live/index_test.exs

@@ -36,6 +36,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         conn
         |> visit("/")
         |> assert_has("dd", collection |> length() |> Integer.to_string())
+        |> render_async()
 
       collection
       |> Enum.frequencies_by(& &1.format)
@@ -58,6 +59,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
       session =
         conn
         |> visit("/")
+        |> render_async()
         |> assert_has("span", escape(latest_record.title))
 
       for artist <- latest_record.artists do
@@ -94,7 +96,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         })
         |> Repo.update!()
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       assert_has(session, "h1", "On This day")
 
@@ -126,7 +128,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         })
         |> Repo.update!()
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       assert_has(session, "##{record_today.id} h2", escape(record_today.title))
 
@@ -179,7 +181,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
 
       {:ok, _dup} = MusicLibrary.Records.create_record(dup_attrs)
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       # The grouped record should appear with the group ID
       assert_has(session, "#group-#{base_record.musicbrainz_id}")
@@ -201,7 +203,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         })
         |> Repo.update!()
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       assert_has(session, "span", "Today")
     end
@@ -222,7 +224,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         })
         |> Repo.update!()
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       assert_has(session, "span", "5 years ago")
     end
@@ -243,7 +245,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         })
         |> Repo.update!()
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       assert_has(session, "span", "10 years ago")
     end
@@ -264,7 +266,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         })
         |> Repo.update!()
 
-      session = conn |> visit("/")
+      session = conn |> visit("/") |> render_async()
 
       # 3 years is not a milestone (not divisible by 5 or 10)
       assert_has(session, "span", "3 years ago")