From 6cc3dd32a50303e8cc80b2d877027bff2f62f4ed Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Thu, 26 Jun 2025 23:29:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Favicon/index.tsx | 30 ++++++++++++++++++++++--------
 src/components/Nip05/index.tsx   |  7 +++++--
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Favicon/index.tsx b/src/components/Favicon/index.tsx
index 43f7d8fa..01341c5f 100644
--- a/src/components/Favicon/index.tsx
+++ b/src/components/Favicon/index.tsx
@@ -1,15 +1,29 @@
+import { cn } from '@/lib/utils'
 import { useState } from 'react'
 
-export function Favicon({ domain, className }: { domain: string; className?: string }) {
+export function Favicon({
+  domain,
+  className,
+  fallback = null
+}: {
+  domain: string
+  className?: string
+  fallback?: React.ReactNode
+}) {
+  const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
-  if (error) return null
+  if (error) return fallback
 
   return (
-    <img
-      src={`https://${domain}/favicon.ico`}
-      alt={domain}
-      className={className}
-      onError={() => setError(true)}
-    />
+    <div className={cn('relative', className)}>
+      {loading && <div className={cn('absolute inset-0', className)}>{fallback}</div>}
+      <img
+        src={`https://${domain}/favicon.ico`}
+        alt={domain}
+        className={cn('absolute inset-0', className)}
+        onError={() => setError(true)}
+        onLoad={() => setLoading(false)}
+      />
+    </div>
   )
 }
diff --git a/src/components/Nip05/index.tsx b/src/components/Nip05/index.tsx
index bef22de9..1de6e883 100644
--- a/src/components/Nip05/index.tsx
+++ b/src/components/Nip05/index.tsx
@@ -32,10 +32,13 @@ export default function Nip05({ pubkey, append }: { pubkey: string; append?: str
         to={toNoteList({ domain: nip05Domain })}
         className={`flex items-center gap-1 hover:underline truncate [&_svg]:size-3.5 [&_svg]:shrink-0 ${nip05IsVerified ? 'text-primary' : 'text-muted-foreground'}`}
       >
-        {nip05IsVerified ? <BadgeCheck /> : <BadgeAlert />}
+        {nip05IsVerified ? (
+          <Favicon domain={nip05Domain} className="w-3.5 h-3.5" fallback={<BadgeCheck />} />
+        ) : (
+          <BadgeAlert />
+        )}
         <span className="text-sm truncate">{nip05Domain}</span>
       </SecondaryPageLink>
-      <Favicon domain={nip05Domain} className="w-3.5 h-3.5" />
       {append && <span className="text-sm text-muted-foreground truncate">{append}</span>}
     </div>
   )