diff --git a/src/components/channels/channelListItem.tsx b/src/components/channels/channelListItem.tsx
index 083da565..73c99d7d 100644
--- a/src/components/channels/channelListItem.tsx
+++ b/src/components/channels/channelListItem.tsx
@@ -6,7 +6,15 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
-  const channel: any = useChannelMetadata(data.event_id, data.metadata);
+  let fallback: any;
+
+  if (typeof data.metadata === 'object') {
+    fallback = data.metadata;
+  } else {
+    fallback = JSON.parse(data.metadata);
+  }
+
+  const channel: any = useChannelMetadata(data.event_id, fallback);
   const pageContext = usePageContext();
 
   const searchParams: any = pageContext.urlParsed.search;
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 43c2fb66..4ef4b77f 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -1,12 +1,13 @@
 import ActiveLink from '@components/activeLink';
-import ChannelList from '@components/channels/channelList';
 import ChatList from '@components/chats/chatList';
 
 import { Disclosure } from '@headlessui/react';
 import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
-import { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
+const ChannelList = lazy(() => import('@components/channels/channelList'));
+
 export default function Navigation() {
   return (
     <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3">
diff --git a/src/utils/hooks/useChannelMetadata.tsx b/src/utils/hooks/useChannelMetadata.tsx
index d6795464..aa3554d6 100644
--- a/src/utils/hooks/useChannelMetadata.tsx
+++ b/src/utils/hooks/useChannelMetadata.tsx
@@ -7,17 +7,8 @@ import { updateChannelMetadata } from '@utils/storage';
 import { useCallback, useContext, useEffect, useState } from 'react';
 
 export const useChannelMetadata = (id: string, fallback: any) => {
-  let parseFallback: any;
-
-  if (typeof fallback === 'object') {
-    parseFallback = fallback.metadata;
-  } else {
-    const json = JSON.parse(fallback.metadata);
-    parseFallback = json;
-  }
-
   const pool: any = useContext(RelayContext);
-  const [metadata, setMetadata] = useState(parseFallback);
+  const [metadata, setMetadata] = useState(fallback);
 
   const fetchMetadata = useCallback(() => {
     const unsubscribe = pool.subscribe(