fix(ui): in-page browse virtual lists and cover load priority (#783)

* fix(ui): in-page browse virtual lists and cover load priority

Align virtualizer scrollMargin with the in-page scroll viewport so
artist/album rows do not vanish on deep scroll after #731. Resolve
CachedImage IntersectionObserver root to the nearest scrolling pane so
network fetch slots favor visible covers; throttle Artists infinite scroll
to one page per visibleCount update.

* chore(release): CHANGELOG and credits for PR #783

src/components/CachedImage.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { APP_MAIN_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { acquireUrl, getCachedBlob, releaseUrl, subscribeCoverUpgraded } from '../utils/imageCache';
+import { resolveIntersectionScrollRoot } from '../utils/ui/resolveIntersectionScrollRoot';
 
 interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   src: string;
@@ -11,11 +11,16 @@ interface CachedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    */
   fetchQueueBias?: number;
   /**
-   * How far beyond the app scroll viewport `IntersectionObserver` expands the root.
+   * How far beyond the scroll viewport `IntersectionObserver` expands the root.
    * Larger = priority / slot ordering updates while the row is still off-screen → less
    * empty flash when it hits the viewport. CSS margin syntax (`440px`, `10% 0`, …).
    */
   observeRootMargin?: string;
+  /**
+   * Optional explicit IO root (e.g. in-page browse viewport id). When omitted,
+   * the nearest scrolling ancestor is used so priority tracks the visible pane.
+   */
+  observeScrollRootId?: string;
 }
 
 /** Search UI: load artist avatars before album covers when many requests compete. */
@@ -142,6 +147,7 @@ export default function CachedImage({
   cacheKey,
   fetchQueueBias = 0,
   observeRootMargin = DEFAULT_CACHED_IMAGE_PREPARE_MARGIN,
+  observeScrollRootId,
   style,
   onLoad,
   onError,
@@ -164,9 +170,10 @@ export default function CachedImage({
     const el = imgRef.current;
     if (!el) return;
     const root =
-      typeof document !== 'undefined'
-        ? (document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID) as Element | null)
-        : null;
+      (observeScrollRootId
+        ? (document.getElementById(observeScrollRootId) as Element | null)
+        : null)
+      ?? resolveIntersectionScrollRoot(el);
     const updateFromEntry = (entry: IntersectionObserverEntry) => {
       if (entry.isIntersecting) {
         const r = entry.boundingClientRect;
@@ -191,7 +198,7 @@ export default function CachedImage({
     );
     observer.observe(el);
     return () => observer.disconnect();
-  }, [observeRootMargin]);
+  }, [observeRootMargin, observeScrollRootId]);
 
   // Same as Hero/PlayerBar: show the salted fetch URL while IndexedDB/network resolves,
   // then swap to the shared blob URL — avoids an <img> with no src and opacity stuck at 0.

src/components/VirtualCardGrid.tsx

@@ -59,14 +59,10 @@ export function VirtualCardGrid<T>({
     return document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID) as HTMLElement | null;
   }, [scrollRootId]);
 
-  const scrollMargin = useVirtualizerScrollMargin(
-    wrapRef,
-    () => document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID),
-    {
-      active: !disableVirtualization,
-      deps: [layoutSignal, virtualRowCount],
-    },
-  );
+  const scrollMargin = useVirtualizerScrollMargin(wrapRef, getScrollElement, {
+    active: !disableVirtualization,
+    deps: [layoutSignal, virtualRowCount, scrollRootId],
+  });
 
   const virtualizer = useVirtualizer({
     count: disableVirtualization ? 0 : virtualRowCount,

src/components/artists/ArtistAvatars.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { buildCoverArtUrl, coverArtCacheKey } from '../../api/subsonicStreamUrl';
 import type { SubsonicArtist } from '../../api/subsonicTypes';
 import CachedImage from '../CachedImage';
+import { ARTISTS_INPAGE_SCROLL_VIEWPORT_ID } from '../../constants/appScroll';
 import { nameColor, nameInitial } from '../../utils/componentHelpers/artistsHelpers';
 
 interface AvatarProps {
@@ -31,6 +32,7 @@ export function ArtistCardAvatar({ artist, showImages }: AvatarProps) {
           src={coverSrc}
           cacheKey={coverKey}
           alt={artist.name}
+          observeScrollRootId={ARTISTS_INPAGE_SCROLL_VIEWPORT_ID}
         />
       </div>
     );
@@ -64,6 +66,7 @@ export function ArtistRowAvatar({ artist, showImages }: AvatarProps) {
           src={coverSrc}
           cacheKey={coverKey}
           alt={artist.name}
+          observeScrollRootId={ARTISTS_INPAGE_SCROLL_VIEWPORT_ID}
           style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }}
         />
       </div>