Fix remix tracks skeleton issues (#11910)

Author: DejayJD

packages/common/src/api/tan-query/useRemixes.ts

@@ -89,7 +89,12 @@ export const useRemixes = (
     }),
     initialPageParam: 0,
     getNextPageParam: (lastPage: RemixesQueryData, allPages) => {
-      if (lastPage?.tracks?.length < pageSize) return undefined
+      const isSecondPage = allPages.length === 1
+      if (
+        lastPage?.tracks?.length < pageSize ||
+        (isSecondPage && includeOriginal && lastPage?.tracks?.length - 1 === 0)
+      )
+        return undefined
       return allPages.reduce((acc, page) => acc + page.tracks.length, 0)
     },
     queryFn: async ({ pageParam }) => {
@@ -104,20 +109,19 @@ export const useRemixes = (
           onlyCosigns: isCosign,
           onlyContestEntries: isContestEntry
         })
-      const processedTracks = transformAndCleanList(
+      let processedTracks = transformAndCleanList(
         data.tracks,
         userTrackMetadataFromSDK
       )
 
       primeTrackData({ tracks: processedTracks, queryClient, dispatch })
 
-      let tracksWithOriginal
       if (includeOriginal && pageParam === 0) {
         const track = queryClient.getQueryData(getTrackQueryKey(trackId))
         if (track && data.tracks) {
           const user = queryClient.getQueryData(getUserQueryKey(track.owner_id))
           if (user) {
-            tracksWithOriginal = [{ ...track, user }, ...processedTracks]
+            processedTracks = [{ ...track, user }, ...processedTracks]
           }
         }
       }
@@ -128,7 +132,7 @@ export const useRemixes = (
           pageParam,
           pageSize,
           false,
-          { items: tracksWithOriginal ?? processedTracks }
+          { items: processedTracks }
         )
       )
       dispatch(remixesPageActions.setCount({ count: data.count }))

packages/web/src/common/store/queue/sagas.ts

@@ -30,6 +30,7 @@ import {
 } from '@audius/common/store'
 import { Uid, makeUid, waitForAccount, Nullable } from '@audius/common/utils'
 import { all, call, put, select, takeEvery, takeLatest } from 'typed-redux-saga'
+import { PREFIX as REMIXES_PREFIX } from '~/store/pages/remixes/lineup/actions'
 import { PREFIX as SEARCH_PREFIX } from '~/store/pages/search-results/lineup/tracks/actions'
 
 import { make } from 'common/store/analytics/actions'
@@ -65,6 +66,7 @@ const { getIsReachable } = reachabilitySelectors
 
 const QUEUE_SUBSCRIBER_NAME = 'QUEUE'
 
+const TAN_QUERY_LINEUP_PREFIXES = [SEARCH_PREFIX, REMIXES_PREFIX]
 export function* getToQueue(
   prefix: string,
   entry: LineupEntry<Track | Collection>
@@ -302,8 +304,8 @@ function* fetchLineupTracks(currentTrack: Track) {
   const lineupEntry = lineupRegistry[source]
   if (!lineupEntry) return
 
-  // NOTE: SPECIAL CASE - For tan-query search we don't want this behavior
-  if (lineupEntry.actions.prefix === SEARCH_PREFIX) return
+  // NOTE: For tan-query lineups we want to avoid this behavior
+  if (TAN_QUERY_LINEUP_PREFIXES.includes(lineupEntry.actions.prefix)) return
 
   const currentProfileUserHandle = yield* select(getProfileUserHandle)