update useChannelMetadata hook

src/components/channels/channelListItem.tsx

@@ -6,7 +6,16 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  const channel = useChannelMetadata(data.event_id, data.metadata);
+  let metadata: any;
+
+  if (typeof data.metadata === 'object') {
+    metadata = data.metadata;
+  } else {
+    const json = JSON.parse(data.metadata);
+    metadata = json;
+  }
+
+  const channel: any = useChannelMetadata(data.event_id, metadata);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;
@@ -25,8 +34,6 @@ export const ChannelListItem = ({ data }: { data: any }) => {
           src={channel?.picture || DEFAULT_AVATAR}
           alt={data.event_id}
           className="h-5 w-5 rounded bg-zinc-900 object-cover"
-          loading="lazy"
-          fetchpriority="high"
         />
       </div>
       <div>

src/components/chats/chatList.tsx

@@ -30,8 +30,6 @@ export default function ChatList() {
             src={profile?.picture || DEFAULT_AVATAR}
             alt={activeAccount.pubkey}
             className="h-5 w-5 rounded object-cover"
-            loading="lazy"
-            fetchpriority="high"
           />
         </div>
         <div>

src/components/chats/chatListItem.tsx

@@ -22,13 +22,7 @@ export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
       )}
     >
       <div className="relative h-5 w-5 shrink rounded">
-        <img
-          src={profile?.picture || DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-5 w-5 rounded object-cover"
-          loading="lazy"
-          fetchpriority="high"
-        />
+        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
       </div>
       <div>
         <h5 className="text-sm font-medium text-zinc-400">