style: 🎨

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>
   )
 }

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>
   )