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 (
+
+
+
+ )
+ }
if (!profile?.nip05) return null
return (
nip05Name &&
nip05Domain && (
-
+
{nip05Name !== '_' ? (
@{nip05Name}
) : 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 ?
:
}
+ {nip05IsVerified ?
:
}
{nip05Domain}
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
+ return (
+
+
+
+ )
}
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
('')
const [nip05Domain, setNip05Domain] = useState('')
+ 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 }
}