add skeleton state

src/app/note/components/rootNote.tsx

@@ -6,6 +6,7 @@ import { READONLY_RELAYS } from '@lume/stores/constants';
 import { noteParser } from '@lume/utils/parser';
 
 import { memo, useContext } from 'react';
+import Skeleton from 'react-loading-skeleton';
 import useSWRSubscription from 'swr/subscription';
 import { navigate } from 'vite-plugin-ssr/client/router';
 
@@ -71,39 +72,18 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
   }
 
   return (
-    <>
-      {error && <div>failed to load</div>}
-      {!data ? (
-        <div className="relative z-10 flex h-min animate-pulse select-text flex-col">
-          <div className="flex items-start gap-2">
-            <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
-            <div className="flex w-full flex-1 items-start justify-between">
-              <div className="flex w-full items-center justify-between">
-                <div className="flex items-center gap-2 text-sm">
-                  <div className="h-4 w-16 rounded bg-zinc-700" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="-mt-5 pl-[52px]">
-            <div className="flex flex-col gap-6">
-              <div className="h-16 w-full rounded bg-zinc-700" />
-              <div className="flex items-center gap-8">
-                <div className="h-4 w-12 rounded bg-zinc-700" />
-                <div className="h-4 w-12 rounded bg-zinc-700" />
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
+    <div onClick={(e) => openNote(e)} className="relative z-10 flex flex-col">
+      {data ? (
+        <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
           <div className="mt-1 pl-[52px]">
             <NoteContent content={content} />
             <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
           </div>
-        </div>
+        </>
+      ) : (
+        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
       )}
-    </>
+    </div>
   );
 });