[Web] Stop layout shift / scroll bounce in TrackLineup

Two follow-ups to the smoother infinite-scroll work, both visible while
scrolling Trending:

1. Skeleton tiles in ordered lineups now reserve the order column. The
   desktop TrackTile previously hid the rank number and crown when
   `isLoading`, so the order column collapsed to ~0 width on a skeleton
   and the artwork shifted left when real data arrived. With the
   skeleton now rendering the index it's been told (`tiles.length + i`),
   the number / crown stay visible and the layout doesn't jump on load.

2. Skeleton tail is now constant while `hasNextPage`. Before, skeletons
   were gated on `isFetching || isLoadMoreTriggered`, so the page
   ballooned by ~one threshold's worth of skeletons when fetching, then
   shrank back when the page resolved. On a fast scroll deep into that
   shrinking region, the browser had to clamp `scrollTop`, which felt
   like the page "bouncing" mid-scroll. Keeping a constant skeleton
   tail until the end of the lineup means the scroll height only ever
   grows (smoothly, by `pageSize` tile-heights per resolved page) until
   `hasNextPage` flips to false at end-of-lineup.

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

Author: raymondjacobson

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

@@ -282,7 +282,7 @@ export const TrackLineup = ({
   }, [hasNextPage, isFetching, isLoadMoreTriggered, loadNextPage])
 
   const renderSkeletons = useCallback(
-    (skeletonCount: number | undefined) => {
+    (skeletonCount: number | undefined, indexOffset = 0) => {
       if (!skeletonCount) return null
       return (
         <>
@@ -301,7 +301,7 @@ export const TrackLineup = ({
                 <Flex direction={isSmallTrackTile ? 'row' : 'column'} w='100%'>
                   {/* @ts-ignore - TrackTile types don't fully cover loading state */}
                   <TrackTile
-                    index={index}
+                    index={indexOffset + index}
                     size={tileSize}
                     ordered={ordered}
                     isLoading
@@ -435,8 +435,8 @@ export const TrackLineup = ({
                 </Flex>
               ))}
 
-          {(isFetching || isLoadMoreTriggered) && tiles.length > 0
-            ? renderSkeletons(loadingSkeletonCount)
+          {hasNextPage && tiles.length > 0
+            ? renderSkeletons(loadingSkeletonCount, tiles.length)
             : null}
         </InfiniteScroll>
       </div>

packages/web/src/components/track/desktop/TrackTile.tsx

@@ -336,11 +336,9 @@ export const TrackTile = ({
         {/* prefix ordering */}
         {tileOrder && (
           <Flex column gap='2xs' alignItems='center' justifyContent='center'>
-            {!isLoading && tileOrder <= 10 && (
-              <IconCrown color='default' size='s' />
-            )}
+            {tileOrder <= 10 && <IconCrown color='default' size='s' />}
             <Text variant='label' color='default'>
-              {!isLoading && tileOrder}
+              {tileOrder}
             </Text>
           </Flex>
         )}