fix(library): fade artwork over its gradient placeholder instead of grey

[InstaZDLL]

Summary

Two-part fix for the Library tab flicker reported by Daisy:

1. Virtualize Albums and Artists grids — with an 800-item library, the previous flat-grid render mounted 800 React subtrees at once, each carrying an <Artwork>/<FadeInImage> (state + useMemo) and a popover button. Main thread stalled ~1 s before the first paint, then the <img> tags fanned out and filled in. No amount of fade-in could disguise the layout cost.

2. Fade artwork in over its gradient placeholder — once virtualization keeps the DOM size sane, individual tile pop-in is the only remaining glitch. Each <img> now mounts at opacity-0 over the same coloured gradient already used as the "no image" fallback, then fades to 100 on onLoad. WebView-cached images skip the fade entirely (handled in the ref callback when complete && naturalWidth > 0).

What changed

src/components/views/LibraryView.tsx — AlbumGrid and ArtistList:

• Wrap rendering in useVirtualizer keyed on row count (rows × cols)
• ResizeObserver recomputes colCount from the container width to match the original auto-fill,minmax(180px,1fr) Tailwind math
• Each virtual row renders colCount tiles via inline grid styles
• Both share usePageScroll() so the page-driven scrollbar stays (per the cross-cutting rule)
• AlphabetIndex switches from querySelector + scrollIntoView to a scrollToIndexRef callback that drives virtualizer.scrollToIndex(floor(idx / cols)) — off-screen artists aren't in the DOM anymore

src/components/common/FadeInImage.tsx (new) — shared primitive:

• Wrapper hosts the gradient placeholder + clip
• Image mounts at opacity-0, fades to 100 on onLoad
• ref callback pins the fade open when the WebView serves bytes synchronously
• Resets the gate when src changes via the documented "compare prev prop in render" pattern (satisfies react-hooks/set-state-in-effect)

src/components/common/Artwork.tsx — delegates the image rendering to FadeInImage, keeps the existing API.

src/components/views/LibraryView.tsx — artist tile inside ArtistList uses FadeInImage directly with the violet gradient + first-letter as placeholder.

GenreList is intentionally untouched: ~30-50 items in practice, no per-tile state, virtualization would be all cost and no benefit.

Net effect

• Switching to Albums or Artists tabs: only ~rowsVisible × cols tiles in the DOM at any time
• Each cover/avatar fades in from its coloured gradient over 200 ms instead of flashing from grey
• Already-decoded covers (re-visit) appear at full opacity immediately

Test plan

• bun run typecheck
• bun run lint
• Library with ~800 artists → click Artistes tab → first paint within frame budget, tiles fade in cleanly
• Library with ~800 albums → same expectation
• Alphabet jump on Artistes (sort = name): clicking a letter scrolls to the first artist of that letter
• Resize window → tile count per row updates without breaking the virtual offset
• Songs / Genres / Folders unaffected

[coderabbitai]

Warning

Rate limit exceeded

@InstaZDLL has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 40 minutes and 56 seconds before requesting another review.

To continue reviewing without waiting, purchase usage credits in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5708fcb0-6ea4-4952-944a-59d07031c342

📥 Commits

Reviewing files that changed from the base of the PR and between 77bad0a and 0e35055.

📒 Files selected for processing (3)

• src/components/common/Artwork.tsx
• src/components/common/FadeInImage.tsx
• src/components/views/LibraryView.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/library-artwork-flicker

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}