From 0f7a3aa593d79e4c3a947f56b75e4662af9ad257 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sat, 22 Feb 2025 01:14:13 +0800
Subject: [PATCH] feat: nip05 skeleton

---
 src/components/Nip05/index.tsx    | 18 +++++++++++++++---
 src/components/Username/index.tsx |  6 +++++-
 src/hooks/useFetchNip05.tsx       |  9 +++++++--
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Nip05/index.tsx b/src/components/Nip05/index.tsx
index bf416ff1..83efbcf6 100644
--- a/src/components/Nip05/index.tsx
+++ b/src/components/Nip05/index.tsx
@@ -1,17 +1,29 @@
+import { Skeleton } from '@/components/ui/skeleton'
 import { useFetchProfile } from '@/hooks'
 import { useFetchNip05 } from '@/hooks/useFetchNip05'
 import { BadgeAlert, BadgeCheck } from 'lucide-react'
 
 export default function Nip05({ pubkey }: { pubkey: string }) {
   const { profile } = useFetchProfile(pubkey)
-  const { nip05IsVerified, nip05Name, nip05Domain } = useFetchNip05(profile?.nip05, pubkey)
+  const { nip05IsVerified, nip05Name, nip05Domain, isFetching } = useFetchNip05(
+    profile?.nip05,
+    pubkey
+  )
+
+  if (isFetching) {
+    return (
+      <div className="flex items-center py-1">
+        <Skeleton className="h-3 w-20" />
+      </div>
+    )
+  }
 
   if (!profile?.nip05) return null
 
   return (
     nip05Name &&
     nip05Domain && (
-      <div className="flex items-center space-x-1 truncate">
+      <div className="flex items-center space-x-1 truncate [&_svg]:size-5">
         {nip05Name !== '_' ? (
           <div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
         ) : null}
@@ -21,7 +33,7 @@ export default function Nip05({ pubkey }: { pubkey: string }) {
           className={`flex items-center space-x-1 hover:underline truncate ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
           rel="noreferrer"
         >
-          {nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
+          {nip05IsVerified ? <BadgeCheck /> : <BadgeAlert />}
           <div className="text-sm truncate">{nip05Domain}</div>
         </a>
       </div>
diff --git a/src/components/Username/index.tsx b/src/components/Username/index.tsx
index d8fc2ecb..3d993ebe 100644
--- a/src/components/Username/index.tsx
+++ b/src/components/Username/index.tsx
@@ -21,7 +21,11 @@ export default function Username({
 }) {
   const { profile } = useFetchProfile(userId)
   if (!profile && !withoutSkeleton) {
-    return <Skeleton className={cn('w-16 my-1', skeletonClassName)} />
+    return (
+      <div className="py-1">
+        <Skeleton className={cn('w-16', skeletonClassName)} />
+      </div>
+    )
   }
   if (!profile) return null
 
diff --git a/src/hooks/useFetchNip05.tsx b/src/hooks/useFetchNip05.tsx
index 2a4ed38d..87dbe7e4 100644
--- a/src/hooks/useFetchNip05.tsx
+++ b/src/hooks/useFetchNip05.tsx
@@ -5,15 +5,20 @@ export function useFetchNip05(nip05?: string, pubkey?: string) {
   const [nip05IsVerified, setNip05IsVerified] = useState(false)
   const [nip05Name, setNip05Name] = useState<string>('')
   const [nip05Domain, setNip05Domain] = useState<string>('')
+  const [isFetching, setIsFetching] = useState(true)
 
   useEffect(() => {
-    if (!nip05 || !pubkey) return
+    if (!nip05 || !pubkey) {
+      setIsFetching(false)
+      return
+    }
     verifyNip05(nip05, pubkey).then(({ isVerified, nip05Name, nip05Domain }) => {
       setNip05IsVerified(isVerified)
       setNip05Name(nip05Name)
       setNip05Domain(nip05Domain)
+      setIsFetching(false)
     })
   }, [nip05, pubkey])
 
-  return { nip05IsVerified, nip05Name, nip05Domain }
+  return { nip05IsVerified, nip05Name, nip05Domain, isFetching }
 }