Fix artist coin exclusives loading (#13788)

Author: dylanjeffers

packages/common/src/api/index.ts

@@ -32,6 +32,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/collection/useFeaturedArtistCoinTracks'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'

packages/common/src/api/tan-query/collection/useFeaturedArtistCoinTracks.ts

@@ -0,0 +1,30 @@
+import { useTracks } from '../tracks/useTracks'
+import type { QueryOptions } from '../types'
+
+import { useExploreContent } from './useExploreContent'
+
+/**
+ * Combines useExploreContent and useTracks to fetch featured artist coin tracks
+ * with prefetched track data. Use this instead of useExploreContent + useTracks
+ * separately to avoid the skeleton → nothing → tracks flash caused by the
+ * two-step fetch (explore content IDs → track metadata).
+ *
+ * Shared across web and mobile.
+ */
+export const useFeaturedArtistCoinTracks = (options?: QueryOptions) => {
+  const { data: exploreContent } = useExploreContent(options)
+
+  const tracksQuery = useTracks(exploreContent?.featuredArtistCoinTracks, {
+    ...options,
+    enabled: options?.enabled !== false
+  })
+
+  return {
+    trackIds: tracksQuery.data?.map((track) => track.track_id),
+    tracks: tracksQuery.data,
+    byId: tracksQuery.byId,
+    isPending: tracksQuery.isPending,
+    isSuccess: tracksQuery.isSuccess,
+    isError: tracksQuery.isError
+  }
+}

packages/mobile/src/screens/explore-screen/components/FeaturedArtistCoinTracks.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useExploreContent } from '@audius/common/api'
+import { useFeaturedArtistCoinTracks } from '@audius/common/api'
 import { exploreMessages as messages } from '@audius/common/messages'
 import { QueueSource } from '@audius/common/store'
 
@@ -12,19 +12,19 @@ import { TrackTileCarousel } from './TrackTileCarousel'
 export const FeaturedArtistCoinTracks = () => {
   const { InViewWrapper, inView } =
     useExploreSectionTracking('Artist Coin Tracks')
-  const { data, isPending } = useExploreContent({ enabled: inView })
+  const { trackIds, isPending } = useFeaturedArtistCoinTracks({
+    enabled: inView
+  })
 
   return (
     <InViewWrapper>
-      {data?.featuredArtistCoinTracks.length ? (
-        <ExploreSection title={messages.artistCoinExclusives}>
-          <TrackTileCarousel
-            tracks={data?.featuredArtistCoinTracks}
-            isLoading={isPending}
-            source={QueueSource.EXPLORE}
-          />
-        </ExploreSection>
-      ) : null}
+      <ExploreSection title={messages.artistCoinExclusives}>
+        <TrackTileCarousel
+          tracks={trackIds}
+          isLoading={isPending}
+          source={QueueSource.EXPLORE}
+        />
+      </ExploreSection>
     </InViewWrapper>
   )
 }

packages/web/src/pages/search-explore-page/components/desktop/ArtistCoinTracksSection.tsx

@@ -1,4 +1,4 @@
-import { useExploreContent } from '@audius/common/api'
+import { useFeaturedArtistCoinTracks } from '@audius/common/api'
 import { exploreMessages as messages } from '@audius/common/messages'
 
 import { Carousel } from './Carousel'
@@ -8,20 +8,22 @@ import { useExploreSectionTracking } from './useExploreSectionTracking'
 export const ArtistCoinTracksSection = () => {
   const { ref, inView } = useExploreSectionTracking('Artist Coin Tracks')
 
-  const { data, isLoading, isError, isSuccess } = useExploreContent({
-    enabled: inView
-  })
+  const {
+    trackIds = [],
+    isPending,
+    isError
+  } = useFeaturedArtistCoinTracks({ enabled: inView })
 
-  if (isError || (isSuccess && !data?.featuredArtistCoinTracks?.length)) {
+  if (isError || (!isPending && !trackIds?.length)) {
     return null
   }
 
   return (
     <Carousel ref={ref} title={messages.artistCoinExclusives}>
-      {!inView || isLoading || !data ? (
+      {!inView || isPending ? (
         <TileSkeletons noShimmer />
       ) : (
-        <TilePairs data={data.featuredArtistCoinTracks} />
+        <TilePairs data={trackIds} />
       )}
     </Carousel>
   )