claude/fix-mobile-profile-tracks-h214W (#14125)

The profile TracksTab called `<Lineup selfLoad />` unconditionally, so
the
initial fetch could fire before `useProfileUser` had populated `handle`.
The profile tracks saga (`getTracks`) short-circuits with `[]` when
`handle` is undefined, which flips `hasMore` to false and leaves the tab
permanently stuck showing the empty tile. Gate `selfLoad` on
`handleLower`
so the fetch is deferred until the handle is available, and match the
RepostsTab pattern of only showing the empty tile once the lineup has
moved past IDLE (or `track_count` is known to be 0).

Also: AlbumsTab / PlaylistsTab forwarded `isLoading={isPending}` to
`CollectionList` regardless of the known collection count, which
rendered
skeleton tiles for users with zero albums/playlists before settling on
the empty tile. When the count is known to be 0 we can skip the loading
state and render the empty tile immediately.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: dylanjeffers

.changeset/fix-mobile-profile-tracks-empty.md

@@ -0,0 +1,5 @@
+---
+"@audius/mobile": patch
+---
+
+Fix mobile profile tracks tab showing "no tracks" regression when visiting an artist's profile, and stop rendering skeleton tiles for the albums/playlists tabs when the user has zero of them.

packages/common/src/api/tan-query/users/useUserAlbums.ts

@@ -82,12 +82,22 @@ export const useUserAlbums = (
     enabled: options?.enabled !== false && !!userId
   })
 
-  const { data: collections } = useCollections(queryRes.data)
+  const {
+    data: collections,
+    isPending: isCollectionsPending,
+    isLoading: isCollectionsLoading
+  } = useCollections(queryRes.data)
+
+  // The ID query can resolve before the per-collection entity queries do; if
+  // we only reported `queryRes.isPending` the consumer would see an empty
+  // `data` array in that gap and flash a "no albums" state.
+  const hasPendingCollections =
+    (queryRes.data?.length ?? 0) > 0 && isCollectionsPending
 
   return {
     data: collections,
-    isPending: queryRes.isPending,
-    isLoading: queryRes.isLoading,
+    isPending: queryRes.isPending || hasPendingCollections,
+    isLoading: queryRes.isLoading || (hasPendingCollections && isCollectionsLoading),
     hasNextPage: queryRes.hasNextPage,
     isFetchingNextPage: queryRes.isFetchingNextPage,
     fetchNextPage: queryRes.fetchNextPage

packages/common/src/api/tan-query/users/useUserPlaylists.ts

@@ -82,12 +82,22 @@ export const useUserPlaylists = (
     enabled: options?.enabled !== false && !!userId
   })
 
-  const { data: collections } = useCollections(queryRes.data)
+  const {
+    data: collections,
+    isPending: isCollectionsPending,
+    isLoading: isCollectionsLoading
+  } = useCollections(queryRes.data)
+
+  // The ID query can resolve before the per-collection entity queries do; if
+  // we only reported `queryRes.isPending` the consumer would see an empty
+  // `data` array in that gap and flash a "no playlists" state.
+  const hasPendingCollections =
+    (queryRes.data?.length ?? 0) > 0 && isCollectionsPending
 
   return {
     data: collections,
-    isPending: queryRes.isPending,
-    isLoading: queryRes.isLoading,
+    isPending: queryRes.isPending || hasPendingCollections,
+    isLoading: queryRes.isLoading || (hasPendingCollections && isCollectionsLoading),
     hasNextPage: queryRes.hasNextPage,
     isFetchingNextPage: queryRes.isFetchingNextPage,
     fetchNextPage: queryRes.fetchNextPage

packages/mobile/src/screens/profile-screen/ProfileCoverPhoto.tsx

@@ -17,7 +17,7 @@ const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
 
 // Height below the status bar. The avatar is 80px tall and is positioned so
 // it extends ~32px below the cover photo, matching the Figma spec.
-const COVER_PHOTO_CONTENT_HEIGHT = 96
+export const COVER_PHOTO_CONTENT_HEIGHT = 96
 
 const useStyles = makeStyles(({ spacing }) => ({
   darkOverlay: {

packages/mobile/src/screens/profile-screen/ProfileScreenSkeleton.tsx

@@ -2,22 +2,21 @@ import { useMemo } from 'react'
 
 import { times, random } from 'lodash'
 import { View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { Flex } from '@audius/harmony-native'
 import Skeleton, { StaticSkeleton } from 'app/components/skeleton'
 import { makeStyles } from 'app/styles'
 
+import { COVER_PHOTO_CONTENT_HEIGHT } from './ProfileCoverPhoto'
+
 const useStyles = makeStyles(({ palette, spacing }) => ({
   root: {
     marginBottom: 40
   },
-  coverPhoto: {
-    height: 96
-  },
   profilePicture: {
     position: 'absolute',
-    top: 52,
-    left: 12,
+    left: spacing(4),
     zIndex: 101,
 
     height: 82,
@@ -147,12 +146,14 @@ export const ExpandableSectionSkeleton = () => {
 
 export const ProfileHeaderSkeleton = () => {
   const styles = useStyles()
+  const insets = useSafeAreaInsets()
   const statSkeleton = <StaticSkeleton style={styles.stat} />
+  const coverPhotoHeight = insets.top + COVER_PHOTO_CONTENT_HEIGHT
 
   return (
     <Flex backgroundColor='white'>
-      <StaticSkeleton height={96} />
-      <Skeleton style={styles.profilePicture} />
+      <StaticSkeleton height={coverPhotoHeight} />
+      <Skeleton style={[styles.profilePicture, { top: insets.top + 48 }]} />
       <Flex p='l' gap='s' backgroundColor='white'>
         <Flex row justifyContent='space-between' backgroundColor='white'>
           <Flex mt='3xl'>

packages/mobile/src/screens/profile-screen/ProfileTabs/AlbumsTab.tsx

@@ -50,7 +50,7 @@ export const AlbumsTab = () => {
       disableTopTabScroll
       showsVerticalScrollIndicator={false}
       totalCount={album_count}
-      isLoading={isPending}
+      isLoading={album_count > 0 && isPending}
       onEndReached={handleEndReached}
       isLoadingMore={isFetchingNextPage}
     />

packages/mobile/src/screens/profile-screen/ProfileTabs/PlaylistsTab.tsx

@@ -53,7 +53,7 @@ export const PlaylistsTab = () => {
       totalCount={playlist_count}
       showCreateCollectionTile={isOwner}
       createPlaylistSource={CreatePlaylistSource.PROFILE_PAGE}
-      isLoading={isPending}
+      isLoading={playlist_count > 0 && isPending}
       onEndReached={handleEndReached}
       isLoadingMore={isFetchingNextPage}
     />

packages/mobile/src/screens/profile-screen/ProfileTabs/TracksTab.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 
 import { useProfileUser } from '@audius/common/api'
 import { useProxySelector } from '@audius/common/hooks'
+import { Status } from '@audius/common/models'
 import {
   profilePageTracksLineupActions as tracksActions,
   profilePageSelectors
@@ -14,14 +15,19 @@ import { EmptyProfileTile } from '../EmptyProfileTile'
 const { getProfileTracksLineup } = profilePageSelectors
 
 export const TracksTab = () => {
-  const { handle, user_id, artist_pick_track_id } =
-    useProfileUser({
-      select: (user) => ({
-        handle: user.handle,
-        user_id: user.user_id,
-        artist_pick_track_id: user.artist_pick_track_id
-      })
-    }).user ?? {}
+  const {
+    handle,
+    user_id,
+    track_count = 0,
+    artist_pick_track_id
+  } = useProfileUser({
+    select: (user) => ({
+      handle: user.handle,
+      user_id: user.user_id,
+      track_count: user.track_count,
+      artist_pick_track_id: user.artist_pick_track_id
+    })
+  }).user ?? {}
 
   const handleLower = handle?.toLowerCase()
 
@@ -33,9 +39,14 @@ export const TracksTab = () => {
   const fetchPayload = useMemo(() => ({ userId: user_id }), [user_id])
   const extraFetchOptions = useMemo(() => ({ handle }), [handle])
 
+  // `selfLoad` fired with an undefined handle makes the saga return [],
+  // which poisons `hasMore` and leaves the tab stuck on the empty state.
+  const canSelfLoad = !!handleLower
+  const canShowEmptyTile = track_count === 0 || lineup.status !== Status.IDLE
+
   return (
     <Lineup
-      selfLoad
+      selfLoad={canSelfLoad}
       pullToRefresh
       leadingElementId={artist_pick_track_id}
       showArtistPick={true}
@@ -44,7 +55,9 @@ export const TracksTab = () => {
       fetchPayload={fetchPayload}
       extraFetchOptions={extraFetchOptions}
       disableTopTabScroll
-      LineupEmptyComponent={<EmptyProfileTile tab='tracks' />}
+      LineupEmptyComponent={
+        canShowEmptyTile ? <EmptyProfileTile tab='tracks' /> : undefined
+      }
       showsVerticalScrollIndicator={false}
     />
   )