update thread widget

src/shared/widgets/local/thread.tsx

@@ -1,8 +1,7 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useCallback } from 'react';
 
-import { useStorage } from '@libs/storage/provider';
-
+import { LoaderIcon } from '@shared/icons';
 import {
   MemoizedArticleNote,
   MemoizedFileNote,
@@ -12,8 +11,7 @@ import {
   NoteStats,
   UnknownNote,
 } from '@shared/notes';
-import { RepliesList } from '@shared/notes/replies/list';
-import { NoteSkeleton } from '@shared/notes/skeleton';
+import { ReplyList } from '@shared/notes/replies/list';
 import { TitleBar } from '@shared/titleBar';
 import { User } from '@shared/user';
 import { WidgetWrapper } from '@shared/widgets';
@@ -22,7 +20,6 @@ import { useEvent } from '@utils/hooks/useEvent';
 import { Widget } from '@utils/types';
 
 export function LocalThreadWidget({ params }: { params: Widget }) {
-  const { db } = useStorage();
   const { status, data } = useEvent(params.content);
 
   const renderKind = useCallback(
@@ -44,31 +41,22 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
   return (
     <WidgetWrapper>
       <TitleBar id={params.id} title={params.title} />
-      <div className="h-full overflow-y-auto scrollbar-none">
+      <div className="h-full overflow-y-auto px-3 scrollbar-none">
         {status === 'loading' ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-              <NoteSkeleton />
-            </div>
+          <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
+            <LoaderIcon className="h-5 w-5 animate-spin" />
           </div>
         ) : (
-          <div className="h-min w-full px-3">
-            <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
-              <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-              <div className="mt-2">{renderKind(data)}</div>
-              <NoteActions
-                id={params.content}
-                pubkey={data.pubkey}
-                extraButtons={false}
-              />
-            </div>
+          <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
+            <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+            <div className="mt-2">{renderKind(data)}</div>
+            <NoteActions id={params.content} pubkey={data.pubkey} extraButtons={false} />
           </div>
         )}
-        <div className="px-3">
-          <NoteStats id={params.content} />
-          <NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
-          <RepliesList id={params.content} />
-        </div>
+        <NoteStats id={params.content} />
+        <hr className="my-4 h-px w-full border-none bg-neutral-100" />
+        <NoteReplyForm id={params.content} />
+        <ReplyList id={params.content} />
       </div>
     </WidgetWrapper>
   );