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.
This commit is contained in:
Claudio Ortolina
@@ -1,10 +1,11 @@
|
||||
---
|
||||
id: ML-169.8
|
||||
title: "Fix: StatsLive.Index 10 sync queries blocking TTFB"
|
||||
status: To Do
|
||||
assignee: []
|
||||
status: Done
|
||||
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
|
||||
- [ ] #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
|
||||
- [ ] #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
|
||||
- [ ] #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] #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] #2 Counter badges for collection, wishlist, and scrobbles render immediately from scalar counts
|
||||
- [x] #3 Latest purchase, format/type stats, collection charts, on-this-day records, and scrobble activity load asynchronously with skeleton/loading placeholders
|
||||
- [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
|
||||
- [x] #5 Async sections render graceful failed or nil states and do not flash empty data containers
|
||||
- [x] #6 Tests cover immediate counter rendering and use render_async() for async-loaded Stats page content
|
||||
- [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 -->
|
||||
|
||||
Reference in New Issue
Block a user