fix render blocking for chat/channel

src/components/channels/messages/index.tsx

@@ -7,7 +7,7 @@ import { useCallback, useRef } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import { Virtuoso } from 'react-virtuoso';
 
-export const ChannelMessages = () => {
+export default function ChannelMessages() {
   const virtuosoRef = useRef(null);
   const data = useAtomValue(sortedChannelMessagesAtom);
 
@@ -42,7 +42,7 @@ export const ChannelMessages = () => {
       />
     </div>
   );
-};
+}
 
 const COMPONENTS = {
   EmptyPlaceholder: () => <Skeleton />,

src/components/chats/messageList.tsx

@@ -8,7 +8,7 @@ import { useCallback, useRef } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import { Virtuoso } from 'react-virtuoso';
 
-export const MessageList = () => {
+export default function MessageList() {
   const virtuosoRef = useRef(null);
   const data = useAtomValue(sortedChatMessagesAtom);
 
@@ -47,7 +47,7 @@ export const MessageList = () => {
       />
     </div>
   );
-};
+}
 
 const COMPONENTS = {
   EmptyPlaceholder: () => <Skeleton />,

src/pages/channel/index.page.client.tsx

@@ -1,4 +1,3 @@
-import { ChannelMessages } from '@components/channels/messages';
 import { FormChannel } from '@components/form/channel';
 import NewsfeedLayout from '@components/layouts/newsfeed';
 import { RelayContext } from '@components/relaysProvider';
@@ -12,9 +11,11 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
-import { useContext, useEffect, useRef } from 'react';
+import { Suspense, lazy, useContext, useRef } from 'react';
 import useSWRSubscription from 'swr/subscription';
 
+const ChannelMessages = lazy(() => import('@components/channels/messages'));
+
 export function Page() {
   const pageContext = usePageContext();
   const searchParams: any = pageContext.urlParsed.search;
@@ -33,6 +34,11 @@ export function Page() {
   const hided = useRef(new Set());
 
   useSWRSubscription(id, () => {
+    // reset channel reply
+    resetChannelReply();
+    // reset channel messages
+    resetChannelMessages();
+    // subscribe for new messages
     const unsubscribe = pool.subscribe(
       [
         {
@@ -69,17 +75,12 @@ export function Page() {
     };
   });
 
-  useEffect(() => {
-    // reset channel reply
-    resetChannelReply();
-    // reset channel messages
-    resetChannelMessages();
-  }, [resetChannelReply, resetChannelMessages]);
-
   return (
     <NewsfeedLayout>
       <div className="flex h-full w-full flex-col justify-between">
-        <ChannelMessages />
+        <Suspense fallback={<p>Loading...</p>}>
+          <ChannelMessages />
+        </Suspense>
         <div className="shrink-0 p-3">
           <FormChannel eventId={id} />
         </div>

src/pages/chat/index.page.client.tsx

@@ -1,4 +1,3 @@
-import { MessageList } from '@components/chats/messageList';
 import FormChat from '@components/form/chat';
 import NewsfeedLayout from '@components/layouts/newsfeed';
 import { RelayContext } from '@components/relaysProvider';
@@ -11,9 +10,11 @@ import { usePageContext } from '@utils/hooks/usePageContext';
 import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
-import { useContext, useEffect } from 'react';
+import { Suspense, lazy, useContext } from 'react';
 import useSWRSubscription from 'swr/subscription';
 
+const MessageList = lazy(() => import('@components/chats/messageList'));
+
 export function Page() {
   const pageContext = usePageContext();
   const searchParams: any = pageContext.urlParsed.search;
@@ -27,6 +28,9 @@ export function Page() {
   const resetChatMessages = useResetAtom(chatMessagesAtom);
 
   useSWRSubscription(pubkey, () => {
+    // clear old messages
+    resetChatMessages();
+    // subscribe for next messages
     const unsubscribe = pool.subscribe(
       [
         {
@@ -51,22 +55,12 @@ export function Page() {
     };
   });
 
-  useEffect(() => {
-    let ignore = false;
-
-    if (!ignore) {
-      resetChatMessages();
-    }
-
-    return () => {
-      ignore = true;
-    };
-  }, [resetChatMessages]);
-
   return (
     <NewsfeedLayout>
       <div className="flex h-full w-full flex-col justify-between">
-        <MessageList />
+        <Suspense fallback={<p>Loading...</p>}>
+          <MessageList />
+        </Suspense>
         <div className="shrink-0 p-3">
           <FormChat receiverPubkey={pubkey} />
         </div>