minor design fixes

src/app/note/components/user/default.tsx

@@ -5,7 +5,6 @@ import { shortenKey } from '@lume/utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import Skeleton from 'react-loading-skeleton';
 
 dayjs.extend(relativeTime);
 
@@ -13,21 +12,19 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
   const { user } = useProfile(pubkey);
 
   return (
-    <div className="group relative z-10 flex h-11 items-center gap-2">
-      <div className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+    <div className="group relative z-10 flex items-center gap-2.5">
+      <div className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
-          className="h-11 w-11 rounded-md object-cover"
+          className="h-9 w-9 object-cover"
         />
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex flex-col gap-1">
-          <div className="flex items-baseline gap-2">
-            <h5 className="text-sm font-semibold leading-none group-hover:underline">
-              {user?.display_name || user?.name || <Skeleton />}
-            </h5>
-          </div>
+        <div className="flex flex-col gap-0.5">
+          <h5 className="text-sm font-semibold leading-none group-hover:underline">
+            {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-800"></div>}
+          </h5>
           <div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
             <span>{user?.nip05 || shortenKey(pubkey)}</span>
             <span>•</span>

src/app/note/components/user/reply.tsx

@@ -12,7 +12,7 @@ export default function NoteReplyUser({ pubkey, time }: { pubkey: string; time:
   const { user } = useProfile(pubkey);
 
   return (
-    <div className="group flex items-start gap-3">
+    <div className="group flex items-start gap-2.5">
       <div className="relative h-9 w-9 shrink-0 rounded-md">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}

src/app/note/components/user/repost.tsx

@@ -13,14 +13,14 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
 
   return (
     <div className="group flex items-center gap-2">
-      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+      <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
-          className="h-11 w-11 rounded-md object-cover"
+          className="h-9 w-9 rounded-md object-cover"
         />
       </div>
-      <div className="flex items-baseline gap-2 text-sm">
+      <div className="flex items-baseline gap-1.5 text-sm">
         <h5 className="font-semibold leading-tight group-hover:underline">
           {user?.display_name || user?.name || <Skeleton />}
           <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">