[Web] Larger threshold + viewport-fill skeletons in TrackLineup

The first pass at smoothing infinite-scroll wasn't enough on desktop
because two more things stacked on top of the late-skeleton problem:

- A 1-viewport threshold isn't enough buffer for fast desktop scrolls
  (mouse fling, trackpad, PgDn). Bumped to 2 viewports so the next page
  request fires while there's still meaningful content below.
- The skeleton count was `pageSize`, which is only 4 on Trending / Feed.
  At ~124px per desktop tile that's ~480px of skeletons — half a
  viewport — so the user could blow right through them and land on the
  literal bottom of the list while waiting for the network. Skeleton
  count is now `max(pageSize, ceil(threshold / approxTileHeight))` so
  the loading window always fills the threshold area.

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

Author: raymondjacobson

.changeset/smooth-web-lineup-scroll.md

@@ -2,4 +2,4 @@
 '@audius/web': patch
 ---
 
-Smooth out lineup infinite-scroll on Trending, Feed, and other tanquery-driven track lists. Skeletons used to gate on tanquery's `isFetching`, so the next page only painted after the scroll handler → `loadNextPage` → tanquery state round-trip — long enough that scrolling fast left a visible "stuck at the bottom" gap. The threshold is now ~one viewport (matching mobile) and a synchronous trigger flag renders skeletons on the next frame instead of waiting for `isFetching` to propagate.
+Smooth out lineup infinite-scroll on Trending, Feed, and other tanquery-driven track lists. The scroll-to-bottom "chunk" had three causes stacked: a small fixed 500px threshold, skeletons that gated on tanquery's `isFetching` (so they only painted after a multi-tick state round-trip), and a per-page skeleton count of just `pageSize` (4 on Trending, ~480px tall on desktop) that didn't fill the loading window. The threshold is now ~2× the scroll parent's viewport, a synchronous trigger flag renders skeletons on the next frame, and the skeleton count is sized to fill the threshold area so the bottom stays populated even when the user scrolls in faster than the next page can return.

packages/web/src/components/lineup/TrackLineup.tsx

@@ -19,11 +19,23 @@ import styles from './Lineup.module.css'
 import { LineupVariant } from './types'
 
 const NARROW_CONTAINER_THRESHOLD_PX = 600
-// Fallback used until the scroll parent has been measured. Matches roughly one
-// viewport on a typical laptop — sized so the next page request fires while a
-// full screen of content is still below, and skeletons appear before the user
-// reaches the literal bottom of the list.
-const DEFAULT_LOAD_MORE_THRESHOLD = 800
+// Fallback used until the scroll parent has been measured. Sized so the next
+// page request fires well before the user reaches the literal bottom of the
+// list. Effective threshold is `LOAD_MORE_VIEWPORTS * scrollParent.clientHeight`
+// once measured.
+const DEFAULT_LOAD_MORE_THRESHOLD = 1600
+// Number of viewports of "remaining content" that should trigger loading the
+// next page. Larger values give a bigger buffer for fast desktop scrolling so
+// skeletons paint comfortably before the user reaches the bottom. Matches the
+// effect of mobile's `onEndReachedThreshold` but on the larger desktop viewport
+// we need more headroom to keep up with fling scrolls.
+const LOAD_MORE_VIEWPORTS = 2
+// Approximate rendered heights of a TrackTile in different variants — used to
+// compute how many skeletons to render so the bottom-of-list "loading window"
+// fills the threshold area instead of leaving the user staring at a frozen
+// last entry while the next page is in flight.
+const APPROX_TILE_HEIGHT_LARGE = 124
+const APPROX_TILE_HEIGHT_SMALL = 80
 
 const { getPlaying: getPlayerPlaying } = playbackSelectors
 const { makeGetCurrent } = playbackSelectors
@@ -225,25 +237,26 @@ export const TrackLineup = ({
     return trackIds.slice(0, end)
   }, [trackIds, maxEntries])
 
-  // Track the scroll parent's viewport height so the load-more threshold is
-  // ~one full viewport (matches mobile's `onEndReachedThreshold = 1`). Falls
-  // back to the constant until measured.
-  const [measuredThreshold, setMeasuredThreshold] = useState<number | null>(
+  // Track the scroll parent's viewport height so the load-more threshold is a
+  // multiple of one full viewport. Falls back to the constant until measured.
+  const [scrollParentHeight, setScrollParentHeight] = useState<number | null>(
     null
   )
   useEffect(() => {
     const parent =
       externalScrollParent ?? document.getElementById('mainContent')
     if (!parent) return
-    const update = () => setMeasuredThreshold(parent.clientHeight || null)
+    const update = () => setScrollParentHeight(parent.clientHeight || null)
     update()
     if (typeof ResizeObserver === 'undefined') return
     const observer = new ResizeObserver(update)
     observer.observe(parent)
     return () => observer.disconnect()
   }, [externalScrollParent])
 
-  const effectiveLoadMoreThreshold = measuredThreshold ?? loadMoreThreshold
+  const effectiveLoadMoreThreshold = scrollParentHeight
+    ? scrollParentHeight * LOAD_MORE_VIEWPORTS
+    : loadMoreThreshold
 
   // Synchronous "load more was triggered" flag — set the moment the scroll
   // handler fires so skeletons render on the next frame, without waiting for
@@ -341,6 +354,20 @@ export const TrackLineup = ({
   const isEmpty =
     tiles.length === 0 && !isFetching && !isInitialLoad && !isLoadMoreTriggered
 
+  // While a page is in flight we render skeletons below the loaded tiles. They
+  // need to fill ~one threshold's worth of vertical space so the bottom of the
+  // list feels populated even when the user scrolls into the trigger area
+  // faster than the network can return. `pageSize` is too small on its own
+  // (e.g. trending uses 4) so we floor by a viewport-derived count.
+  const approxTileHeight = isSmallTrackTile
+    ? APPROX_TILE_HEIGHT_SMALL
+    : APPROX_TILE_HEIGHT_LARGE
+  const fillCount = Math.ceil(effectiveLoadMoreThreshold / approxTileHeight)
+  const loadingSkeletonCount = Math.min(
+    Math.max(0, maxEntries - tiles.length),
+    Math.max(pageSize, fillCount)
+  )
+
   return (
     <div
       className={cn(lineupStyle, {
@@ -409,7 +436,7 @@ export const TrackLineup = ({
               ))}
 
           {(isFetching || isLoadMoreTriggered) && tiles.length > 0
-            ? renderSkeletons(Math.min(maxEntries - tiles.length, pageSize))
+            ? renderSkeletons(loadingSkeletonCount)
             : null}
         </InfiniteScroll>
       </div>