feat: 💨

src/components/Image/index.tsx

@@ -8,14 +8,10 @@ export default function Image({
   image: { url, blurHash },
   alt,
   className = '',
-  classNames = {},
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   image: TImageInfo
   alt?: string
-  classNames?: {
-    wrapper?: string
-  }
 }) {
   const [isLoading, setIsLoading] = useState(true)
   const [displayBlurHash, setDisplayBlurHash] = useState(true)
@@ -24,8 +20,8 @@ export default function Image({
   useEffect(() => {
     if (blurHash) {
       const { numX, numY } = decodeBlurHashSize(blurHash)
-      const width = numX * 5
+      const width = numX * 3
-      const height = numY * 5
+      const height = numY * 3
       const pixels = decode(blurHash, width, height)
       const canvas = document.createElement('canvas')
       canvas.width = width
@@ -41,7 +37,7 @@ export default function Image({
   }, [blurHash])
 
   return (
-    <div className={cn('relative', classNames.wrapper ?? '')} {...props}>
+    <div className={cn('relative', className)} {...props}>
       {isLoading && <Skeleton className={cn('absolute inset-0', className)} />}
       <img
         src={url}

src/components/PictureNoteCard/index.tsx

@@ -35,12 +35,14 @@ export default function PictureNoteCard({
   if (!firstImage) return null
 
   return (
-    <div className={cn('space-y-1 cursor-pointer', className)} onClick={() => push(toNote(event))}>
+    <div className={cn('cursor-pointer', className)} onClick={() => push(toNote(event))}>
       <Image className="rounded-lg w-full aspect-[6/8]" image={firstImage} />
-      <div className="line-clamp-2 px-2 font-semibold">{title}</div>
+      <div className="p-2 space-y-1">
-      <div className="flex items-center gap-2 px-2">
+        <div className="line-clamp-2 font-semibold">{title}</div>
-        <UserAvatar userId={event.pubkey} size="xSmall" />
+        <div className="flex items-center gap-2">
-        <Username userId={event.pubkey} className="text-sm text-muted-foreground truncate" />
+          <UserAvatar userId={event.pubkey} size="xSmall" />
+          <Username userId={event.pubkey} className="text-sm text-muted-foreground truncate" />
+        </div>
       </div>
     </div>
   )

src/services/client.service.ts

@@ -48,11 +48,11 @@ class ClientService extends EventTarget {
   private profileEventCache = new LRUCache<string, Promise<NEvent | undefined>>({ max: 10000 })
   private profileEventDataloader = new DataLoader<string, NEvent | undefined>(
     (ids) => Promise.all(ids.map((id) => this._fetchProfileEvent(id))),
-    { cacheMap: this.profileEventCache }
+    { cacheMap: this.profileEventCache, maxBatchSize: 10 }
   )
   private fetchProfileEventFromDefaultRelaysDataloader = new DataLoader<string, NEvent | undefined>(
     this.profileEventBatchLoadFn.bind(this),
-    { cache: false }
+    { cache: false, maxBatchSize: 10 }
   )
   private relayListEventDataLoader = new DataLoader<string, NEvent | undefined>(
     this.relayListEventBatchLoadFn.bind(this),