feat: add loading animation for followings and relays count

src/pages/secondary/ProfilePage/Followings.tsx

@@ -0,0 +1,30 @@
+import { useFetchFollowings } from '@/hooks'
+import { toFollowingList } from '@/lib/link'
+import { SecondaryPageLink } from '@/PageManager'
+import { useFollowList } from '@/providers/FollowListProvider'
+import { useNostr } from '@/providers/NostrProvider'
+import { Loader } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+export default function Followings({ pubkey }: { pubkey: string }) {
+  const { t } = useTranslation()
+  const { pubkey: accountPubkey } = useNostr()
+  const { followings: selfFollowings } = useFollowList()
+  const { followings, isFetching } = useFetchFollowings(pubkey)
+
+  return (
+    <SecondaryPageLink
+      to={toFollowingList(pubkey)}
+      className="flex gap-1 hover:underline w-fit items-center"
+    >
+      {accountPubkey === pubkey ? (
+        selfFollowings.length
+      ) : isFetching ? (
+        <Loader className="animate-spin size-4" />
+      ) : (
+        followings.length
+      )}
+      <div className="text-muted-foreground">{t('Following')}</div>
+    </SecondaryPageLink>
+  )
+}

src/pages/secondary/ProfilePage/Relays.tsx

@@ -0,0 +1,22 @@
+import { useFetchRelayList } from '@/hooks'
+import { toOthersRelaySettings, toRelaySettings } from '@/lib/link'
+import { SecondaryPageLink } from '@/PageManager'
+import { useNostr } from '@/providers/NostrProvider'
+import { Loader } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+export default function Relays({ pubkey }: { pubkey: string }) {
+  const { t } = useTranslation()
+  const { pubkey: accountPubkey } = useNostr()
+  const { relayList, isFetching } = useFetchRelayList(pubkey)
+
+  return (
+    <SecondaryPageLink
+      to={accountPubkey === pubkey ? toRelaySettings('mailbox') : toOthersRelaySettings(pubkey)}
+      className="flex gap-1 hover:underline w-fit items-center"
+    >
+      {isFetching ? <Loader className="animate-spin size-4" /> : relayList.originalRelays.length}
+      <div className="text-muted-foreground">{t('Relays')}</div>
+    </SecondaryPageLink>
+  )
+}

src/pages/secondary/ProfilePage/index.tsx

@@ -12,23 +12,18 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useFetchFollowings, useFetchProfile } from '@/hooks'
 import { useFetchRelayList } from '@/hooks/useFetchRelayList'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import {
+import { toMuteList, toProfileEditor } from '@/lib/link'
-  toFollowingList,
-  toMuteList,
-  toOthersRelaySettings,
-  toProfileEditor,
-  toRelaySettings
-} from '@/lib/link'
 import { generateImageByPubkey } from '@/lib/pubkey'
 import { SecondaryPageLink, useSecondaryPage } from '@/PageManager'
 import { useFeed } from '@/providers/FeedProvider'
-import { useFollowList } from '@/providers/FollowListProvider'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
 import { Link } from 'lucide-react'
 import { forwardRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
+import Followings from './Followings'
+import Relays from './Relays'
 
 const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
   const { t } = useTranslation()
@@ -44,7 +39,6 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
     [relayList, currentRelayUrls]
   )
   const { pubkey: accountPubkey } = useNostr()
-  const { followings: selfFollowings } = useFollowList()
   const { mutePubkeys } = useMuteList()
   const { followings } = useFetchFollowings(profile?.pubkey)
   const isFollowingYou = useMemo(() => {
@@ -127,20 +121,8 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
             </div>
           )}
           <div className="flex gap-4 items-center mt-2 text-sm">
-            <SecondaryPageLink
+            <Followings pubkey={pubkey} />
-              to={toFollowingList(pubkey)}
+            <Relays pubkey={pubkey} />
-              className="flex gap-1 hover:underline w-fit"
-            >
-              {isSelf ? selfFollowings.length : followings.length}
-              <div className="text-muted-foreground">{t('Following')}</div>
-            </SecondaryPageLink>
-            <SecondaryPageLink
-              to={isSelf ? toRelaySettings('mailbox') : toOthersRelaySettings(pubkey)}
-              className="flex gap-1 hover:underline w-fit"
-            >
-              {relayList.originalRelays.length}
-              <div className="text-muted-foreground">{t('Relays')}</div>
-            </SecondaryPageLink>
             {isSelf && (
               <SecondaryPageLink to={toMuteList()} className="flex gap-1 hover:underline w-fit">
                 {mutePubkeys.length}