clean up and fix build error

package.json

@@ -28,7 +28,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
-    "react-loading-skeleton": "^3.2.1",
     "react-string-replace": "^1.1.0",
     "react-virtuoso": "^4.3.1",
     "react-youtube": "^10.1.0",

pnpm-lock.yaml

@@ -43,9 +43,6 @@ dependencies:
   react-hook-form:
     specifier: ^7.43.9
     version: 7.43.9(react@18.2.0)
-  react-loading-skeleton:
-    specifier: ^3.2.1
-    version: 3.2.1(react@18.2.0)
   react-string-replace:
     specifier: ^1.1.0
     version: 1.1.0
@@ -3543,15 +3540,6 @@ packages:
     resolution:
       { integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== }
 
-  /react-loading-skeleton@3.2.1(react@18.2.0):
-    resolution:
-      { integrity: sha512-e1KwEOuBa1REXWoseELIJXlsqWTCHL5IQnqhVhI33WmnuTK7LK1DXl4mmcOLsWVcwqXeOATU9VFJEjz2ytZSng== }
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /react-string-replace@1.1.0:
     resolution:
       { integrity: sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw== }

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');
+    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>