Skip to content

DEF-003 — Songs attempt to load on /rank without filter

Summary

On first load of /rank, the app begins fetching songs automatically with default filters (pop / all / all) even though the user has not pressed Apply. This leads to continuous background fetches before any user interaction.

Environment

  • App: Melodex live
  • Commit: 6a951eb
  • Browser: Firefox 142.0.1 (desktop)
  • Device: Windows 11 laptop
  • Network:Spectrum (approx 450 up / 11 down)
  • Date/Time: 09-18-2025

Triage

  • Severity: Minor
  • Priority: Medium

Preconditions

  • User is authenticated with any log in options.
  • Navigate to /rank directly without setting any filters.

Steps to Reproduce

  1. Log into melodex.io with a valid account.
  2. Go directly to /rank without selecting filters.
  3. Observe network/console activity.

Expected Result

No songs should be fetched until the user explicitly chooses filters and clicks Apply.

Actual Result

  • SongProvider triggers background fetch immediately on mount.
  • Default filter values (pop / all / all) are applied implicitly.
  • Multiple fetch loops occur, buffering ~13–15 songs each cycle.
  • Occasional timeouts logged (DOMException: The operation was aborted).

Impact

  • Backend is hit with unnecessary API requests, leading to wasted network calls and error logs.
  • Perceived reliability is reduced due to visible timeouts in console.

Attachments

Suspected Areas

  • SongProvider useEffect lifecycle hook
  • Filter state initialization logic (default values applied as “selected”)
  • Background fetch trigger conditions not checking for “Apply” action

Diagnostics

  • Observed console logs: repeated Triggering background fetch for more songs entries.
  • Confirmed auth context resolves mid-sequence, but fetch starts even before user context is available.
  • Reproduced on multiple browsers and network conditions.

Proposed Fix

  • Add guard: only trigger background fetch when user explicitly applies filters.
  • Treat default state as “unset” rather than as valid filter selection.
  • Add regression test to ensure no fetch occurs on initial load.

Owner: Michael DeReus
Status: Resolved
Opened: 09-18-2025
Closed: 09-18-2025

Linked Items

  • Risk: R-21 (Unbounded background fetch inflates API usage / cloud costs)
  • Test: EXP-01 (in baseline)

Fix Reference

Root Cause

A combination of state transitions and insufficient guards caused generateNewSongs to re-trigger repeatedly:

  • filtersApplied + isRankPageActive became true while no cooldown/in-flight check prevented subsequent calls.
  • The background trigger didn’t gate on buffer/list counts, so it kept scheduling more fetches even when enough songs were already loaded.
  • Initial load and background fetch logic overlapped, creating a loop after filters were applied.

Changes

  • Background fetching guardrails
  • Added a strict in-flight guard (isBackgroundFetching) and cooldown flag to prevent overlapping calls.
  • Implemented burst prefetch (two pages) that caps the buffer (target ~33 items) and stops automatically.
  • Fetch trigger now checks isRankPageActive, filtersApplied, cooledDown, and current buffer/list counts before firing.

  • De-duped initial load vs. background fetch so /rank doesn’t re-trigger after filters apply.

  • Filter box responsiveness

  • Introduced mode-specific max widths (.filter-container.rank-mode vs .rerank-mode) and enforced container width with higher specificity.
  • Set .filter-container.visible { overflow: visible; } so the genre/decade selects and Apply button aren’t clipped.

  • Locked filter container to a stable medium width on desktop (no over-expansion at larger viewports); full width on mobile.

  • Minor UX/cleanup

  • Clearer console logging for fetch state, burst pages, and final buffer size.
  • No schema or API changes.

Verification Steps

  1. Open /rank, apply a filter set (e.g., Rock / any / all decades).
  2. In the console, confirm:
    • “Initial fetch (post-apply)” appears once.
    • “Burst page 1/2 … buffer size now …” logs occur, then stop around ~33 items.
    • No further generateNewSongs/API calls while idle.
  3. Switch pages and return to /rank: verify there’s no repeated background burst unless filters change.

Verified in: 958a682 on 09-18-2025
Verification Status: Pass