perf: nav bar avatar

src/components/BottomNavigationBar/AccountButton.tsx

@@ -1,12 +1,20 @@
+import { generateImageByPubkey } from '@/lib/pubkey'
+import { cn } from '@/lib/utils'
 import { usePrimaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
 import { UserRound } from 'lucide-react'
-import { SimpleUserAvatar } from '../UserAvatar'
+import { useMemo } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Skeleton } from '../ui/skeleton'
 import BottomNavigationBarItem from './BottomNavigationBarItem'
 
 export default function AccountButton() {
   const { navigate, current } = usePrimaryPage()
-  const { pubkey } = useNostr()
+  const { pubkey, profile } = useNostr()
+  const defaultAvatar = useMemo(
+    () => (profile?.pubkey ? generateImageByPubkey(profile.pubkey) : ''),
+    [profile]
+  )
 
   return (
     <BottomNavigationBarItem
@@ -16,11 +24,18 @@ export default function AccountButton() {
       active={current === 'me'}
     >
       {pubkey ? (
-        <SimpleUserAvatar
+        profile ? (
-          userId={pubkey}
+          <Avatar className={cn('w-7 h-7', current === 'me' ? 'ring-primary ring-1' : '')}>
-          size="small"
+            <AvatarImage src={profile.avatar} className="object-cover object-center" />
-          className={current === 'me' ? 'ring-primary ring-1' : ''}
+            <AvatarFallback>
+              <img src={defaultAvatar} />
+            </AvatarFallback>
+          </Avatar>
+        ) : (
+          <Skeleton
+            className={cn('w-7 h-7 rounded-full', current === 'me' ? 'ring-primary ring-1' : '')}
           />
+        )
       ) : (
         <UserRound />
       )}