major overhaul (not finished)

src/components/user/mini.tsx

@@ -9,7 +9,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ picture: null, name: null });
+  const [profile, setProfile] = useState(null);
 
   const fetchProfile = useCallback(async (id: string) => {
     const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
@@ -26,10 +26,10 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
 
   const insertCacheProfile = useCallback(
     async (event) => {
-      // insert to database
-      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
       // update state
       setProfile(JSON.parse(event.content));
+      // insert to database
+      await db.execute('INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES (?, ?);', [pubkey, event.content]);
     },
     [db, pubkey]
   );
@@ -51,7 +51,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
   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 ? (
+        {profile?.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
         ) : (
           <Avatar
@@ -64,9 +64,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
         )}
       </div>
       <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
-        <p className="truncate leading-tight text-zinc-300">
-          {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-        </p>
+        <p className="truncate leading-tight text-zinc-300">{profile?.name || truncate(pubkey, 16, ' .... ')}</p>
       </div>
     </div>
   );