[PAY-3992] Improve suggested follows loading (#11543)

packages/web/src/components/artist-recommendations/ArtistRecommendationsDropdown.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react'
 
+import { useRelatedArtists } from '@audius/common/api'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { useSpring, animated } from 'react-spring'
 
@@ -24,19 +25,30 @@ const fast = {
 export const ArtistRecommendationsDropdown = (
   props: ArtistRecommendationsDropdownProps
 ) => {
-  const { isVisible } = props
+  const { isVisible, artistId } = props
   const childRef = useRef<HTMLDivElement | null>(null)
 
+  const { data: suggestedArtists = [], isLoading } = useRelatedArtists({
+    artistId,
+    filterFollowed: true,
+    pageSize: 7
+  })
+
+  const shouldShowDropdown =
+    isVisible && !isLoading && suggestedArtists.length > 0
+
   const rect = childRef.current?.getBoundingClientRect()
   const childHeight = rect ? rect.bottom - rect.top : 0
 
   const spring = useSpring({
-    opacity: isVisible ? 1 : 0,
-    height: isVisible ? `${childHeight}px` : '0',
+    opacity: shouldShowDropdown ? 1 : 0,
+    height: shouldShowDropdown ? `${childHeight}px` : '0',
     from: { opacity: 0, height: `${childHeight}px` },
     config: fast
   })
 
+  if (!shouldShowDropdown) return null
+
   return (
     <animated.div className={styles.dropdown} style={spring}>
       <ArtistRecommendations

packages/web/src/components/artist-recommendations/ArtistRecommendationsPopup.tsx

@@ -1,8 +1,14 @@
 import { RefObject } from 'react'
 
+import {
+  getRelatedArtistsQueryKey,
+  useRelatedArtists
+} from '@audius/common/api'
 import { ID, User } from '@audius/common/models'
 import { cacheUsersSelectors } from '@audius/common/store'
+import { MAX_PROFILE_RELATED_ARTISTS } from '@audius/common/utils'
 import { Popup } from '@audius/harmony'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 import { useMainContentRef } from 'pages/MainContentContext'
@@ -29,14 +35,40 @@ export const ArtistRecommendationsPopup = (props: Props) => {
     getUser(state, { id: artistId })
   )
 
+  // Get the related artists which should be available in the query cache
+  const queryClient = useQueryClient()
+  const relatedArtistsData = queryClient.getQueryData<{
+    pages: User[][]
+    pageParams: number[]
+  }>(
+    getRelatedArtistsQueryKey({
+      artistId,
+      pageSize: MAX_PROFILE_RELATED_ARTISTS
+    })
+  )
+  const relatedArtists = relatedArtistsData?.pages.flat()
+
+  // Query for suggested artists only if there are related artists in the first place
+  const { data: suggestedArtists = [], isLoading } = useRelatedArtists(
+    {
+      artistId,
+      filterFollowed: true,
+      pageSize: 7
+    },
+    { enabled: isVisible && relatedArtists && relatedArtists.length > 0 }
+  )
+
+  // Only show popup if we have artists to recommend
+  const shouldShowPopup = isVisible && !isLoading && suggestedArtists.length > 0
+
   if (!user) return null
   const { name } = user
 
   return (
     <Popup
       anchorRef={anchorRef}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      isVisible={isVisible}
+      isVisible={shouldShowPopup}
       zIndex={zIndex.FOLLOW_RECOMMENDATIONS_POPUP}
       onClose={onClose}
       className={styles.popup}

packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx

@@ -24,7 +24,8 @@ import {
   Flex,
   Button,
   IconPencil,
-  FollowButton
+  FollowButton,
+  Text
 } from '@audius/harmony'
 import cn from 'classnames'
 
@@ -476,7 +477,9 @@ const ProfileHeader = ({
           <ArtistRecommendationsDropdown
             isVisible={areArtistRecommendationsVisible}
             renderHeader={() => (
-              <p>Here are some accounts that vibe well with {name}</p>
+              <Flex ml='m'>
+                <Text>Here are some accounts that vibe well with {name}</Text>
+              </Flex>
             )}
             artistId={userId}
             onClose={onCloseArtistRecommendations}