Skip to content

fix: render downloaded albums in offline library tab#14284

Open
dylanjeffers wants to merge 1 commit intomainfrom
dylan/fix-offline-library-albums
Open

fix: render downloaded albums in offline library tab#14284
dylanjeffers wants to merge 1 commit intomainfrom
dylan/fix-offline-library-albums

Conversation

@dylanjeffers
Copy link
Copy Markdown
Contributor

Summary

  • Library → Albums tab in offline mode showed skeletons forever instead of the user's downloaded albums. The banner correctly read "Displaying Available Offline Content" but no cards ever resolved.
  • useLibraryCollections's offline branch returned Object.keys(collectionStatus) directly. Three problems compounded:
    1. The keys are strings, but useCollection (used inside each CollectionCard) keys its TanStack cache by number — every per-card lookup missed cache, fell to if (!partialCollection) return <CollectionCardSkeleton /> (CollectionCard.tsx:86), and rendered a skeleton forever.
    2. The literal 'favorites' sentinel (DOWNLOAD_REASON_FAVORITES) lives in the same map and was being passed downstream as a "collection id."
    3. No filtering by collectionType, so the Albums tab also pulled in playlist IDs and vice versa.
  • Additionally, the hook returned isPending/isLoading from the network query, which stays true indefinitely under TanStack's default networkMode: 'online' when offline. With an empty collectionIds, that drove the outer CardList skeleton too.

Fix

  • Build numeric offlineCollectionIds (drop the 'favorites' sentinel, ignore non-numeric keys).
  • Resolve the cached collections via the existing useCollections hook, then filter by is_album per collectionType and apply the existing text filter.
  • Override isPending/isLoading/hasNextPage/isFetchingNextPage to offline-appropriate values (driven by isDoneLoadingFromDisk) when not reachable, so the outer skeleton no longer gates on the paused network query.

Single file changed: packages/mobile/src/screens/library-screen/useLibraryCollections.ts. Both the Albums and Playlists tabs share this hook, so both are fixed.

Test plan

  • Online: Library → Albums and Playlists tabs render the same set as before (network path unchanged).
  • Online → download an album → toggle airplane mode → open Library → Albums tab. Banner shows; the downloaded album renders (no skeleton).
  • Same flow, Playlists tab: only downloaded playlists render (no album leakage, no 'favorites' ghost card).
  • Offline with no downloads: empty state renders (skeleton no longer stuck because isPending resolves once disk rehydration completes).
  • Filter input still narrows offline results by name.
  • npx tsc and npx eslint clean for useLibraryCollections.ts.

🤖 Generated with Claude Code

The offline branch in useLibraryCollections returned the raw string keys
of collectionStatus, but the TanStack collection cache is keyed by
numeric ID — so each CollectionCard's useCollection lookup missed the
cache and rendered CollectionCardSkeleton forever. The branch also
included the literal 'favorites' bookkeeping key and never filtered by
collectionType, so the Albums tab and Playlists tab both received mixed,
unresolvable IDs.

Convert offline IDs to numbers, drop the 'favorites' sentinel, look up
the cached collections, and filter by is_album per tab. Also surface
isPending/isLoading from the disk-rehydration flag when offline so the
outer skeleton stops gating on the network query that's paused offline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 8, 2026

⚠️ No Changeset found

Latest commit: 36a1904

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant