fix followed accounts flicker

components/explore/Explore.tsx

@@ -28,10 +28,13 @@ const Explore = () => {
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     const perpMarkets = mangoStore.getState().perpMarkets
+    const followedAccountsNumber = followedAccounts
+      ? followedAccounts.length
+      : 0
     const tabs: [string, number][] = [
       ['tokens', banks.length],
       ['perp', perpMarkets.length],
-      ['account:followed-accounts', followedAccounts?.length],
+      ['account:followed-accounts', followedAccountsNumber],
     ]
     return tabs
   }, [banks, followedAccounts])

components/explore/FollowedAccounts.tsx

@@ -43,8 +43,8 @@ import { formatTokenSymbol } from 'utils/tokens'
 
 export type FollowedAccountApi = {
   mango_account: string
-  profile_image_url: string
-  profile_name: string
+  profile_image_url: string | undefined
+  profile_name: string | undefined
   wallet_pk: string
 }
 
@@ -52,7 +52,7 @@ export interface FollowedAccount extends FollowedAccountApi {
   mangoAccount: MangoAccount
 }
 
-const getFollowedMangoAccounts = async (accounts: FollowedAccount[]) => {
+const getFollowedMangoAccounts = async (accounts: FollowedAccountApi[]) => {
   const client = mangoStore.getState().client
   const mangoAccounts = []
   for (const account of accounts) {
@@ -76,22 +76,25 @@ const FollowedAccounts = () => {
   const [followedMangoAccounts, setFollowedMangoAccounts] = useState<
     FollowedAccount[]
   >([])
-  const [loading, setLoading] = useState(false)
+  const [loadingMangoAccounts, setLoadingMangoAccounts] = useState(true)
 
   useEffect(() => {
-    if (!followedAccounts || !followedAccounts.length) return
+    if (!followedAccounts || !followedAccounts.length) {
+      setLoadingMangoAccounts(false)
+      return
+    }
     const getAccounts = async () => {
-      setLoading(true)
+      setLoadingMangoAccounts(true)
       const accounts = await getFollowedMangoAccounts(followedAccounts)
       setFollowedMangoAccounts(accounts)
-      setLoading(false)
+      setLoadingMangoAccounts(false)
     }
     getAccounts()
   }, [followedAccounts])
 
   return (
     <div className="px-4 pt-4 md:px-6 md:pb-10">
-      {loadingFollowedAccounts || loading ? (
+      {loadingFollowedAccounts || loadingMangoAccounts ? (
         [...Array(3)].map((x, i) => (
           <SheenLoader className="mt-2 flex flex-1" key={i}>
             <div className="h-[94px] w-full bg-th-bkg-2" />

components/shared/ToggleFollowButton.tsx

@@ -95,14 +95,14 @@ const ToggleFollowButton = ({
     loading ||
     !publicKey ||
     !signMessage ||
-    (!isFollowed && followedAccounts?.length >= 10)
+    (!isFollowed && followedAccounts && followedAccounts?.length >= 10)
 
   return (
     <Tooltip
       content={
         !publicKey
           ? t('account:tooltip-connect-to-follow')
-          : !isFollowed && followedAccounts?.length >= 10
+          : !isFollowed && followedAccounts && followedAccounts?.length >= 10
           ? t('account:tooltip-follow-max-reached')
           : showText
           ? ''

hooks/useFollowedAccounts.ts

@@ -1,3 +1,4 @@
+import { FollowedAccountApi } from '@components/explore/FollowedAccounts'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useQuery } from '@tanstack/react-query'
 import { isEmpty } from 'lodash'
@@ -8,8 +9,8 @@ const fetchFollowedAccounts = async (walletPk: string | undefined) => {
     const response = await fetch(
       `${MANGO_DATA_API_URL}/user-data/following?wallet-pk=${walletPk}`,
     )
-    const data = await response.json()
-    if (isEmpty(data)) {
+    const data: FollowedAccountApi[] = await response.json()
+    if (!data || isEmpty(data)) {
       return []
     } else return data
   } catch (e) {