perf improve

src/app/chats/components/list.tsx

@@ -7,6 +7,8 @@ import { UnknownsModal } from '@app/chats/components/unknowns';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { LoaderIcon } from '@shared/icons';
+
 import { useNostr } from '@utils/hooks/useNostr';
 
 export function ChatsList() {
@@ -33,8 +35,10 @@ export function ChatsList() {
     return (
       <div className="flex flex-col">
         <div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
-          <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-          <div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+          <div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center">
+            <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+          </div>
+          <h5 className="text-white/50">Loading messages...</h5>
         </div>
       </div>
     );

src/app/chats/components/messages/item.tsx

@@ -2,6 +2,7 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 
 import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
 
+import { TextNote } from '@shared/notes';
 import { User } from '@shared/user';
 
 export function ChatMessageItem({
@@ -20,13 +21,12 @@ export function ChatMessageItem({
   }
 
   return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10">
+    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
       <div className="flex flex-col">
         <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
-        <div className="-mt-[20px] pl-[49px]">
-          <p className="select-text whitespace-pre-line break-words text-base text-white">
-            {message.content}
-          </p>
+        <div className="-mt-5 flex items-start gap-3">
+          <div className="w-10 shrink-0" />
+          <TextNote content={message.content} />
         </div>
       </div>
     </div>