From d0350c6ad3db5268db45993084cd1f2dc0874147 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Mon, 13 Jan 2025 17:09:20 +0800
Subject: [PATCH] perf: nav bar avatar

---
 .../BottomNavigationBar/AccountButton.tsx     | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/BottomNavigationBar/AccountButton.tsx b/src/components/BottomNavigationBar/AccountButton.tsx
index a59afd7e..7781cfd5 100644
--- a/src/components/BottomNavigationBar/AccountButton.tsx
+++ b/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
-          userId={pubkey}
-          size="small"
-          className={current === 'me' ? 'ring-primary ring-1' : ''}
-        />
+        profile ? (
+          <Avatar className={cn('w-7 h-7', current === 'me' ? 'ring-primary ring-1' : '')}>
+            <AvatarImage src={profile.avatar} className="object-cover object-center" />
+            <AvatarFallback>
+              <img src={defaultAvatar} />
+            </AvatarFallback>
+          </Avatar>
+        ) : (
+          <Skeleton
+            className={cn('w-7 h-7 rounded-full', current === 'me' ? 'ring-primary ring-1' : '')}
+          />
+        )
       ) : (
         <UserRound />
       )}