polish

src/app/new/components/mentionPopupItem.tsx

@@ -1,10 +1,18 @@
+import * as Avatar from '@radix-ui/react-avatar';
+import { minidenticon } from 'minidenticons';
+import { useMemo } from 'react';
+
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
 export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: string }) {
-  const { status, user } = useProfile(pubkey, embed);
+  const { isLoading, user } = useProfile(pubkey, embed);
+  const svgURI = useMemo(
+    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
+    [pubkey]
+  );
 
-  if (status === 'pending') {
+  if (isLoading) {
     return (
       <div className="flex items-center gap-2.5 px-2">
         <div className="relative h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-400 dark:bg-neutral-600" />
@@ -18,14 +26,25 @@ export function MentionPopupItem({ pubkey, embed }: { pubkey: string; embed?: st
 
   return (
     <div className="flex h-11 items-center justify-start gap-2.5 px-2 hover:bg-neutral-200 dark:bg-neutral-800">
-      <img
-        src={user.picture || user.image}
-        alt={pubkey}
-        className="shirnk-0 h-8 w-8 rounded-md object-cover"
-      />
+      <Avatar.Root className="shirnk-0 h-8 w-8">
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          loading="lazy"
+          decoding="async"
+          className="h-8 w-8 rounded-md object-cover"
+        />
+        <Avatar.Fallback delayMs={300}>
+          <img
+            src={svgURI}
+            alt={pubkey}
+            className="h-8 w-8 rounded-md bg-black dark:bg-white"
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
       <div className="flex flex-col items-start gap-px">
         <h5 className="max-w-[10rem] truncate text-sm font-medium leading-none text-neutral-900 dark:text-neutral-100">
-          {user.display_name || user.displayName || user.name}
+          {user?.display_name || user?.displayName || user?.name}
         </h5>
         <span className="text-sm leading-none text-neutral-600 dark:text-neutral-400">
           {displayNpub(pubkey, 16)}