[PE-5994] Fix mobile lineups (#11905)

Author: dylanjeffers

packages/mobile/src/components/lineup/TanQueryLineup.tsx

@@ -298,7 +298,7 @@ export type LineupProps = {
   itemStyles?: ViewStyle
 
   // Tan query props
-  pageSize?: number
+  pageSize: number
   initialPageSize?: number
   isFetching: boolean
   loadNextPage: () => void
@@ -318,7 +318,6 @@ export type LineupProps = {
  */
 export const TanQueryLineup = ({
   actions,
-  maxEntries,
   delineate,
   disableTopTabScroll,
   fetchPayload,
@@ -350,6 +349,7 @@ export const TanQueryLineup = ({
   isFetching,
   isPending,
   queryData = [],
+  maxEntries = Infinity,
   ...listProps
 }: LineupProps) => {
   const debouncedLoadNextPage = useDebouncedCallback(
@@ -429,16 +429,11 @@ export const TanQueryLineup = ({
         : entries.slice(offset)
 
     const getSkeletonCount = () => {
-      // No skeletons if not fetching
-      if (!isFetching && !isLineupPending) {
-        return 0
+      if (lineup.entries.length === 0 && (isPending || isLineupPending)) {
+        return Math.min(maxEntries, initialPageSize ?? pageSize)
       }
-      // Lineups like Feed load a different number of items on the first page
-      if (initialPageSize && isPending) {
-        return initialPageSize
-      }
-      if (pageSize) {
-        return maxEntries ? Math.min(maxEntries, pageSize) : pageSize
+      if (isFetching) {
+        return Math.min(maxEntries, pageSize)
       }
       return 0
     }

packages/mobile/src/screens/track-screen/TrackScreenLineup.tsx

@@ -3,9 +3,10 @@ import { trackPageMessages as messages } from '@audius/common/messages'
 import type { ID, User } from '@audius/common/models'
 import { tracksActions } from '~/store/pages/track/lineup/actions'
 
-import { Button, Flex, Text } from '@audius/harmony-native'
+import { Flex, Text } from '@audius/harmony-native'
 import { TanQueryLineup } from 'app/components/lineup/TanQueryLineup'
-import { useNavigation } from 'app/hooks/useNavigation'
+
+import { ViewOtherRemixesButton } from './ViewOtherRemixesButton'
 
 type TrackScreenLineupProps = {
   user: User | null
@@ -46,25 +47,13 @@ export const TrackScreenLineup = ({
     data
   } = useTrackPageLineup({ trackId })
 
-  const navigation = useNavigation()
-
-  const viewRemixesButton = (
-    <Button
-      style={{ alignSelf: 'flex-start' }}
-      size='small'
-      onPress={() => {
-        navigation.navigate('TrackRemixes', { trackId })
-      }}
-    >
-      {messages.viewOtherRemixes}
-    </Button>
-  )
-
   if (!indices) return null
 
   const renderRemixParentSection = () => {
     if (indices.remixParentSection.index === undefined) return null
 
+    const parentTrackId = data?.[indices.remixParentSection.index]?.id
+
     return (
       <Section title={messages.originalTrack}>
         <Flex column gap='l'>
@@ -73,6 +62,7 @@ export const TrackScreenLineup = ({
             lineup={lineup}
             offset={indices.remixParentSection.index}
             maxEntries={indices.remixParentSection.pageSize}
+            pageSize={pageSize}
             includeLineupStatus
             itemStyles={itemStyles}
             isFetching={isFetching}
@@ -81,14 +71,16 @@ export const TrackScreenLineup = ({
             isPending={isPending}
             queryData={data}
           />
-          {viewRemixesButton}
+          {parentTrackId ? (
+            <ViewOtherRemixesButton parentTrackId={parentTrackId} />
+          ) : null}
         </Flex>
       </Section>
     )
   }
 
   const renderRemixesSection = () => {
-    if (indices.remixesSection.index === null) return null
+    if (indices.remixesSection.index === undefined) return null
 
     return (
       <Section title={messages.remixes}>
@@ -98,6 +90,7 @@ export const TrackScreenLineup = ({
             lineup={lineup}
             offset={indices.remixesSection.index}
             maxEntries={indices.remixesSection.pageSize}
+            pageSize={pageSize}
             includeLineupStatus
             itemStyles={itemStyles}
             isFetching={isFetching}
@@ -106,7 +99,7 @@ export const TrackScreenLineup = ({
             isPending={isPending}
             queryData={data}
           />
-          {viewRemixesButton}
+          <ViewOtherRemixesButton parentTrackId={trackId} />
         </Flex>
       </Section>
     )
@@ -122,6 +115,7 @@ export const TrackScreenLineup = ({
           lineup={lineup}
           offset={indices.moreBySection.index}
           maxEntries={indices.moreBySection.pageSize ?? pageSize}
+          pageSize={pageSize}
           includeLineupStatus
           itemStyles={itemStyles}
           isFetching={isFetching}
@@ -144,6 +138,7 @@ export const TrackScreenLineup = ({
           lineup={lineup}
           offset={indices.recommendedSection.index}
           maxEntries={indices.recommendedSection.pageSize}
+          pageSize={pageSize}
           includeLineupStatus
           itemStyles={itemStyles}
           isFetching={isFetching}

packages/mobile/src/screens/track-screen/ViewOtherRemixesButton.tsx

@@ -0,0 +1,27 @@
+import { trackPageMessages as messages } from '@audius/common/messages'
+import type { ID } from '@audius/common/models'
+
+import { Button } from '@audius/harmony-native'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+type ViewOtherRemixesButtonProps = {
+  parentTrackId: ID
+}
+
+export const ViewOtherRemixesButton = ({
+  parentTrackId: trackId
+}: ViewOtherRemixesButtonProps) => {
+  const navigation = useNavigation()
+
+  return (
+    <Button
+      style={{ alignSelf: 'flex-start' }}
+      size='small'
+      onPress={() => {
+        navigation.navigate('TrackRemixes', { trackId })
+      }}
+    >
+      {messages.viewOtherRemixes}
+    </Button>
+  )
+}