refactor image with fallback and added virtuoso

src/components/user/mini.tsx

@@ -1,59 +1,44 @@
 import { ImageWithFallback } from '@components/imageWithFallback';
 
-import { createCacheProfile, getCacheProfile } from '@utils/storage';
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { getCacheProfile } from '@utils/storage';
 import { truncate } from '@utils/truncate';
 
-import { fetch } from '@tauri-apps/api/http';
-import Avatar from 'boring-avatars';
-import destr from 'destr';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
+export const UserMini = ({ pubkey }: { pubkey: string }) => {
   const [profile, setProfile] = useState(null);
 
-  const fetchProfile = useCallback(async (id: string) => {
-    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
-      method: 'GET',
-      timeout: 30,
-    });
-    return res.data;
+  const fetchCacheProfile = useCallback(async (id: string) => {
+    const res = await getCacheProfile(id);
+    const data = JSON.parse(res.metadata);
+    setProfile(data);
   }, []);
 
   useEffect(() => {
-    getCacheProfile(pubkey).then((res) => {
-      if (res) {
-        setProfile(destr(res.metadata));
-      } else {
-        fetchProfile(pubkey)
-          .then((res: any) => {
-            setProfile(destr(res.content));
-            createCacheProfile(pubkey, res.content);
-          })
-          .catch(console.error);
-      }
-    });
-  }, [fetchProfile, pubkey]);
+    fetchCacheProfile(pubkey).catch(console.error);
+  }, [fetchCacheProfile, pubkey]);
 
-  return (
-    <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
-        {profile?.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
-        ) : (
-          <Avatar
-            size={20}
-            name={pubkey}
-            variant="beam"
-            square={true}
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+  if (profile) {
+    return (
+      <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
+        <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
+          <ImageWithFallback
+            src={profile?.picture || DEFAULT_AVATAR}
+            alt={pubkey}
+            fill={true}
+            className="rounded object-cover"
           />
-        )}
+        </div>
+        <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
+          <p className="truncate leading-tight text-zinc-300">
+            {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
+          </p>
+        </div>
       </div>
-      <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-        <p className="truncate leading-tight text-zinc-300">
-          {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-        </p>
-      </div>
-    </div>
-  );
-});
+    );
+  } else {
+    return <></>;
+  }
+};