use swr for subscribe relaypool (only chats/channels page)

src/components/channels/messages/index.tsx

@@ -1,15 +1,14 @@
 import ChannelMessageItem from '@components/channels/messages/item';
-import { Placeholder } from '@components/note/placeholder';
 
 import { sortedChannelMessagesAtom } from '@stores/channel';
 
 import { useAtomValue } from 'jotai';
 import { useCallback, useRef } from 'react';
+import Skeleton from 'react-loading-skeleton';
 import { Virtuoso } from 'react-virtuoso';
 
 export const ChannelMessages = () => {
   const virtuosoRef = useRef(null);
-
   const data = useAtomValue(sortedChannelMessagesAtom);
 
   const itemContent: any = useCallback(
@@ -46,6 +45,5 @@ export const ChannelMessages = () => {
 };
 
 const COMPONENTS = {
-  EmptyPlaceholder: () => <Placeholder />,
-  ScrollSeekPlaceholder: () => <Placeholder />,
+  EmptyPlaceholder: () => <Skeleton />,
 };

src/components/chats/messageList.tsx

@@ -1,19 +1,19 @@
 import MessageListItem from '@components/chats/messageListItem';
-import { Placeholder } from '@components/note/placeholder';
 
 import { sortedChatMessagesAtom } from '@stores/chat';
 
 import useLocalStorage from '@rehooks/local-storage';
 import { useAtomValue } from 'jotai';
 import { useCallback, useRef } from 'react';
+import Skeleton from 'react-loading-skeleton';
 import { Virtuoso } from 'react-virtuoso';
 
 export const MessageList = () => {
-  const [activeAccount]: any = useLocalStorage('account', {});
   const virtuosoRef = useRef(null);
-
   const data = useAtomValue(sortedChatMessagesAtom);
 
+  const [activeAccount]: any = useLocalStorage('account', {});
+
   const itemContent: any = useCallback(
     (index: string | number) => {
       return (
@@ -50,6 +50,5 @@ export const MessageList = () => {
 };
 
 const COMPONENTS = {
-  EmptyPlaceholder: () => <Placeholder />,
-  ScrollSeekPlaceholder: () => <Placeholder />,
+  EmptyPlaceholder: () => <Skeleton />,
 };