wip: polish

src/shared/accounts/active.tsx

@@ -1,11 +1,12 @@
 import { NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
+import * as Avatar from '@radix-ui/react-avatar';
+import { minidenticon } from 'minidenticons';
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
 import { HorizontalDotsIcon } from '@shared/icons';
-import { Image } from '@shared/image';
 
 import { useActivities } from '@stores/activities';
 
@@ -19,6 +20,9 @@ export function ActiveAccount() {
   const { sub } = useNostr();
 
   const addActivity = useActivities((state) => state.addActivity);
+  const svgURI =
+    'data:image/svg+xml;utf8,' +
+    encodeURIComponent(minidenticon(db.account.pubkey, 90, 50));
 
   useEffect(() => {
     const filter: NDKFilter = {
@@ -57,12 +61,24 @@ export function ActiveAccount() {
   return (
     <div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
       <Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
-        <Image
-          src={user?.picture || user?.image}
-          alt={db.account.npub}
-          className="aspect-square h-auto w-full rounded-md"
-        />
-        <span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-neutral-100 dark:ring-neutral-900" />
+        <Avatar.Root>
+          <Avatar.Image
+            src={user?.picture || user?.image}
+            alt={db.account.pubkey}
+            loading="lazy"
+            decoding="async"
+            style={{ contentVisibility: 'auto' }}
+            className="aspect-square h-auto w-full rounded-md"
+          />
+          <Avatar.Fallback delayMs={300}>
+            <img
+              src={svgURI}
+              alt={db.account.pubkeypubkey}
+              className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
+            />
+          </Avatar.Fallback>
+        </Avatar.Root>
+        <span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-teal-500 ring-2 ring-neutral-100 dark:ring-neutral-900" />
       </Link>
       <div className="inline-flex items-center justify-center rounded-md">
         <HorizontalDotsIcon className="h-4 w-4" />