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">

src/utils/hooks/useChannelMetadata.tsx

@@ -4,15 +4,14 @@ import { DEFAULT_RELAYS } from '@stores/constants';
 
 import { updateChannelMetadata } from '@utils/storage';
 
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 
 export const useChannelMetadata = (id: string, fallback: string) => {
   const pool: any = useContext(RelayContext);
-  const [metadata, setMetadata] = useState(null);
-  const unsubscribe = useRef(null);
+  const [metadata, setMetadata] = useState(fallback);
 
   const fetchMetadata = useCallback(() => {
-    unsubscribe.current = pool.subscribe(
+    const unsubscribe = pool.subscribe(
       [
         {
           kinds: [41],
@@ -34,28 +33,22 @@ export const useChannelMetadata = (id: string, fallback: string) => {
         logAllEvents: false,
       }
     );
+
+    return () => {
+      unsubscribe();
+    };
   }, [id, pool]);
 
   useEffect(() => {
     let ignore = false;
 
     if (!ignore) {
-      if (typeof fallback === 'object') {
-        setMetadata(fallback);
-      } else {
-        const json = JSON.parse(fallback);
-        setMetadata(json);
-      }
-
       // fetch kind 41
       fetchMetadata();
     }
 
     return () => {
       ignore = true;
-      if (unsubscribe.current) {
-        unsubscribe.current();
-      }
     };
   }, [fetchMetadata, fallback]);