[Web] Smooth out lineup infinite-scroll on Trending and Feed

[raymondjacobson]

Summary

Web port of the recent mobile fix in apps#14272. The tanquery-driven TrackLineup (Trending, Feed, Profile Tracks/Reposts, Search Tracks, Listening History, Remixes, Contest Submissions) felt rough at the bottom of a page: scrolling fast, you'd hit the literal end of the list with nothing visible, then late skeletons would appear, then tracks. Two things stacked:

• Fixed 500px threshold in react-infinite-scroller. On tall monitors the user could blow past it before the next page even started loading.
• Skeletons gated on tanquery's isFetching — they only painted after the scroll handler → loadNextPage → fetchNextPage → tanquery state round-trip. That's a multi-tick gap after the user already reached the bottom.

This PR:

• Sizes the threshold to ~one viewport (the scroll parent's clientHeight, tracked with a ResizeObserver), matching mobile's onEndReachedThreshold = 1. Falls back to 800px until the parent is measured.
• Adds a local isLoadMoreTriggered flag set the same tick the scroll handler fires, so skeletons render on the very next frame instead of waiting for isFetching to flip. Cleared when entries arrive or the parent finishes fetching.
• Routes InfiniteScroll's loadMore through a single handleLoadMore guarded by the flag, so we never double-trigger.

Single load-more entry point now:

const handleLoadMore = useCallback(() => {
  if (!hasNextPage || isFetching || isLoadMoreTriggered) return
  if (!loadNextPage) return
  setIsLoadMoreTriggered(true)
  loadNextPage()
}, [hasNextPage, isFetching, isLoadMoreTriggered, loadNextPage])

Skeleton render conditions consult both the parent state and the local trigger:

{(isFetching || isLoadMoreTriggered) && tiles.length > 0
  ? renderSkeletons(Math.min(maxEntries - tiles.length, pageSize))
  : null}

Test plan

• Open Trending (Week / Month / All-Time) on desktop, scroll fast — skeletons appear before reaching the bottom and the next page loads in.
• Same on the Feed page.
• Mobile-web: scroll Trending / Feed in a phone-sized viewport (useWindow path) — same smooth behavior.
• Resize the browser between page loads — threshold updates via ResizeObserver.
• Verify other TrackLineup consumers still paginate correctly (Profile Tracks / Reposts, Search Tracks, Track remixes, Listening History, Contest Submissions).
• Verify the empty state still renders when a tab has no tracks.

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 43dc8e6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@audius/web	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

🌐 Web preview ready

Preview URL: https://audius-web-preview-pr-14286.audius.workers.dev

Unique preview for this PR (deployed from this branch).
Workflow run