fix: 🐛

src/components/Embedded/EmbeddedMention.tsx

@@ -2,7 +2,14 @@ import Username from '../Username'
 import { TEmbeddedRenderer } from './types'
 
 export function EmbeddedMention({ userId }: { userId: string }) {
-  return <Username userId={userId} showAt className="text-highlight font-normal inline-block" />
+  return (
+    <Username
+      userId={userId}
+      showAt
+      className="text-highlight font-normal inline-block"
+      withoutSkeleton
+    />
+  )
 }
 
 export const embeddedNostrNpubRenderer: TEmbeddedRenderer = {

src/components/Username/index.tsx

@@ -10,15 +10,20 @@ export default function Username({
   userId,
   showAt = false,
   className,
-  skeletonClassName
+  skeletonClassName,
+  withoutSkeleton = false
 }: {
   userId: string
   showAt?: boolean
   className?: string
   skeletonClassName?: string
+  withoutSkeleton?: boolean
 }) {
   const { profile } = useFetchProfile(userId)
-  if (!profile) return <Skeleton className={cn('w-16 my-1', skeletonClassName)} />
+  if (!profile && !withoutSkeleton) {
+    return <Skeleton className={cn('w-16 my-1', skeletonClassName)} />
+  }
+  if (!profile) return null
 
   const { username, pubkey } = profile
 

src/pages/secondary/NotePage/index.tsx

@@ -81,8 +81,12 @@ function ParentNote({ eventId }: { eventId?: string }) {
         className="flex space-x-1 p-1 items-center clickable text-sm text-muted-foreground hover:text-foreground"
         onClick={() => push(toNote(event))}
       >
-        <UserAvatar userId={event.pubkey} size="tiny" />
+        <UserAvatar userId={event.pubkey} size="tiny" className="shrink-0" />
-        <Username userId={event.pubkey} className="font-semibold" skeletonClassName="h-4" />
+        <Username
+          userId={event.pubkey}
+          className="font-semibold"
+          skeletonClassName="h-4 shrink-0"
+        />
         <div className="truncate">{event.content}</div>
       </Card>
       <div className="ml-5 w-px h-2 bg-border" />