clean up and fix build error

src/components/channels/channelListItem.tsx

@@ -1,7 +1,8 @@
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
 import { usePageContext } from '@utils/hooks/usePageContext';
 
-import Skeleton from 'react-loading-skeleton';
 import { twMerge } from 'tailwind-merge';
 
 export const ChannelListItem = ({ data }: { data: any }) => {
@@ -20,10 +21,10 @@ export const ChannelListItem = ({ data }: { data: any }) => {
       )}
     >
       <div className="relative h-5 w-5 shrink-0 rounded bg-zinc-900">
-        <img src={channel?.picture || <Skeleton />} alt={data.event_id} className="h-5 w-5 rounded object-contain" />
+        <img src={channel?.picture || DEFAULT_AVATAR} alt={data.event_id} className="h-5 w-5 rounded object-contain" />
       </div>
       <div>
-        <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name || <Skeleton />}</h5>
+        <h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name}</h5>
       </div>
     </a>
   );

src/components/channels/channelProfile.tsx

@@ -1,32 +1,39 @@
+import { DEFAULT_AVATAR } from '@stores/constants';
+
 import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
 
 import { Copy } from 'iconoir-react';
 import { nip19 } from 'nostr-tools';
-import Skeleton from 'react-loading-skeleton';
 
 export const ChannelProfile = ({ id, pubkey }: { id: string; pubkey: string }) => {
   const metadata = useChannelMetadata(id, pubkey);
-  const noteID = nip19.noteEncode(id);
+  const noteID = id ? nip19.noteEncode(id) : null;
 
   const copyNoteID = async () => {
     const { writeText } = await import('@tauri-apps/api/clipboard');
-    await writeText(noteID);
+    if (noteID) {
+      await writeText(noteID);
+    }
   };
 
   return (
     <div className="inline-flex items-center gap-2">
       <div className="relative shrink-0 rounded-md">
-        <img src={metadata?.picture || <Skeleton />} alt={id} className="h-8 w-8 rounded bg-zinc-900 object-contain" />
+        <img
+          src={metadata?.picture || DEFAULT_AVATAR}
+          alt={id}
+          className="h-8 w-8 rounded bg-zinc-900 object-contain"
+        />
       </div>
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-1">
-          <h5 className="truncate text-sm font-medium leading-none text-zinc-100">{metadata?.name || <Skeleton />}</h5>
+          <h5 className="truncate text-sm font-medium leading-none text-zinc-100">{metadata?.name}</h5>
           <button onClick={() => copyNoteID()}>
             <Copy width={14} height={14} className="text-zinc-400" />
           </button>
         </div>
         <p className="text-xs leading-none text-zinc-400">
-          {metadata?.about || noteID.substring(0, 24) + '...' || <Skeleton />}
+          {metadata?.about || (noteID && noteID.substring(0, 24) + '...')}
         </p>
       </div>
     </div>

src/components/channels/messages/index.tsx

@@ -1,10 +1,10 @@
 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 default function ChannelMessages() {
@@ -45,5 +45,5 @@ export default function ChannelMessages() {
 }
 
 const COMPONENTS = {
-  EmptyPlaceholder: () => <Skeleton />,
+  EmptyPlaceholder: () => <Placeholder />,
 };

src/components/chats/messageList.tsx

@@ -1,11 +1,11 @@
 import { AccountContext } from '@components/accountProvider';
 import { MessageListItem } from '@components/chats/messageListItem';
+import { Placeholder } from '@components/note/placeholder';
 
 import { sortedChatMessagesAtom } from '@stores/chat';
 
 import { useAtomValue } from 'jotai';
 import { useCallback, useContext, useRef } from 'react';
-import Skeleton from 'react-loading-skeleton';
 import { Virtuoso } from 'react-virtuoso';
 
 export default function MessageList() {
@@ -50,5 +50,5 @@ export default function MessageList() {
 }
 
 const COMPONENTS = {
-  EmptyPlaceholder: () => <Skeleton />,
+  EmptyPlaceholder: () => <Placeholder />,
 };

src/components/navigation.tsx

@@ -5,7 +5,6 @@ import ChatList from '@components/chats/chatList';
 import { Disclosure } from '@headlessui/react';
 import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
 import { Suspense } from 'react';
-import Skeleton from 'react-loading-skeleton';
 
 export default function Navigation() {
   return (
@@ -60,7 +59,7 @@ export default function Navigation() {
               <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
             </Disclosure.Button>
             <Disclosure.Panel>
-              <Suspense fallback={<Skeleton count={2} />}>
+              <Suspense fallback={<p>Loading...</p>}>
                 <ChannelList />
               </Suspense>
             </Disclosure.Panel>