From e01a773ba21c69560dfc83ad8c737503807be97f Mon Sep 17 00:00:00 2001
From: mroxso <24775431+mroxso@users.noreply.github.com>
Date: Wed, 7 May 2025 17:13:19 +0200
Subject: [PATCH] fix: Optimize image loading and styling across multiple
 components (#110)

Co-authored-by: highperfocused <highperfocused@pm.me>
---
 components/GalleryCard.tsx             |  8 +++++++-
 components/KIND20Card.tsx              | 11 ++++-------
 components/NoteCard.tsx                | 15 ++++++++++++---
 components/QuickViewKind20NoteCard.tsx | 11 +++++------
 components/QuickViewNoteCard.tsx       | 14 ++++++++++++--
 components/TrendingImageNew.tsx        |  8 +++++++-
 6 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/components/GalleryCard.tsx b/components/GalleryCard.tsx
index 1fdffe8..a532a9c 100644
--- a/components/GalleryCard.tsx
+++ b/components/GalleryCard.tsx
@@ -31,7 +31,13 @@ const GalleryCard: React.FC<GalleryCardProps> = ({ pubkey, eventId, imageUrl, li
         <div>
           <div className='d-flex justify-content-center align-items-center'>
             <div style={{ position: 'relative' }}>
-              <img src={imageUrl} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', margin: 'auto' }} alt={eventId} />
+              <img 
+                src={imageUrl} 
+                className='rounded lg:rounded-lg w-full h-full object-cover' 
+                style={{ maxHeight: '75vh', margin: 'auto' }} 
+                alt={eventId}
+                loading="lazy"
+              />
             </div>
           </div>
         </div>
diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx
index 6a68d89..5eaaedf 100644
--- a/components/KIND20Card.tsx
+++ b/components/KIND20Card.tsx
@@ -80,18 +80,15 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
             <div className="w-full">
               <div className="w-full flex justify-center">
                 <div className="relative w-full h-auto min-h-[300px] max-h-[80vh] flex justify-center">
-                  <Image
+                  <img
                     src={image}
                     alt={text}
-                    className="rounded-lg object-contain max-w-full h-auto"
+                    className="rounded-lg w-full h-auto object-contain"
                     onError={() => setImageError(true)}
-                    priority
-                    width={1200}
-                    height={800}
+                    loading="lazy"
                     style={{
                       maxHeight: "80vh",
-                      width: "auto",
-                      maxWidth: "100%"
+                      margin: "auto"
                     }}
                   />
                 </div>
diff --git a/components/NoteCard.tsx b/components/NoteCard.tsx
index b58f43a..c182f2a 100644
--- a/components/NoteCard.tsx
+++ b/components/NoteCard.tsx
@@ -93,8 +93,10 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event,
                             <img
                               key={index}
                               src={src}
-                              className='rounded lg:rounded-lg'
-                              style={{ maxWidth: '100%', maxHeight: '66vh', objectFit: 'contain', margin: 'auto' }}
+                              className='rounded lg:rounded-lg w-full h-auto object-contain'
+                              style={{ maxHeight: '66vh', margin: 'auto' }}
+                              alt={textWithoutImage || "Post image"}
+                              loading="lazy"
                             />
                           </CarouselItem>
                         ))}
@@ -103,7 +105,14 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event,
                       <CarouselNext />
                     </Carousel>
                   ) : (
-                    imageSrc ? <img src={imageSrc[0]} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '66vh', objectFit: 'contain', margin: 'auto' }} /> : ""
+                    imageSrc ? 
+                    <img 
+                      src={imageSrc[0]} 
+                      className='rounded lg:rounded-lg w-full h-auto object-contain' 
+                      style={{ maxHeight: '66vh', margin: 'auto' }}
+                      alt={textWithoutImage || "Post image"}
+                      loading="lazy"
+                    /> : ""
                   )}
                 </div>
                 <div className='w-full h-full px-10'>
diff --git a/components/QuickViewKind20NoteCard.tsx b/components/QuickViewKind20NoteCard.tsx
index 292e409..9fc034a 100644
--- a/components/QuickViewKind20NoteCard.tsx
+++ b/components/QuickViewKind20NoteCard.tsx
@@ -35,18 +35,17 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubke
   const { width, height } = extractDimensions(event);
 
   const card = (
-    <Card className="aspect-square">
+    <Card className="aspect-square overflow-hidden">
       <SmallCardContent className="h-full p-0">
         <div className="h-full w-full">
           <div className='relative w-full h-full'>
-            <Image 
+            <img 
               src={image || "/placeholder.svg"} 
               alt={text}
-              fill
-              sizes="(max-width: 768px) 100vw, 300px"
-              className='rounded lg:rounded-lg object-cover' 
-              priority
+              className='w-full h-full rounded lg:rounded-lg object-cover' 
+              loading="lazy"
               onError={() => setImageError(true)}
+              style={{ objectPosition: 'center' }}
             />
           </div>
         </div>
diff --git a/components/QuickViewNoteCard.tsx b/components/QuickViewNoteCard.tsx
index 362d008..6738f64 100644
--- a/components/QuickViewNoteCard.tsx
+++ b/components/QuickViewNoteCard.tsx
@@ -45,7 +45,12 @@ const QuickViewNoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tag
               <div className="absolute top-2 right-2 w-7 h-7 lg:w-12 lg:h-12 bg-black bg-opacity-40 rounded-lg flex items-center justify-center">
                 <StackIcon className='absolute w-7 h-7 lg:w-12 lg:h-12'/>
               </div>
-              <img src={imageSrc[0]} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', margin: 'auto' }} alt={text} />
+              <img src={imageSrc[0]} 
+                className='rounded lg:rounded-lg w-full h-auto object-cover' 
+                style={{ maxHeight: '75vh', margin: 'auto' }} 
+                alt={text} 
+                loading="lazy"
+              />
             </div>
           ) : imageSrc && imageSrc.length > 0 ? (
             <div style={{ position: 'relative' }}>
@@ -54,7 +59,12 @@ const QuickViewNoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tag
                   <PlayIcon className='absolute w-7 h-7 lg:w-12 lg:h-12' />
                 </div>
               }
-              <img src={imageSrc[0]} className='rounded lg:rounded-lg' style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', margin: 'auto' }} alt={text} />
+              <img src={imageSrc[0]} 
+                className='rounded lg:rounded-lg w-full h-auto object-cover' 
+                style={{ maxHeight: '75vh', margin: 'auto' }} 
+                alt={text} 
+                loading="lazy"
+              />
             </div>
           ) : videoSrc && videoSrc.length > 0 ? (
             <div style={{ position: 'relative' }}>
diff --git a/components/TrendingImageNew.tsx b/components/TrendingImageNew.tsx
index e515a3b..1b6eae3 100644
--- a/components/TrendingImageNew.tsx
+++ b/components/TrendingImageNew.tsx
@@ -63,7 +63,13 @@ const TrendingImageNew: React.FC<TrendingImageNewProps> = ({ event }) => {
             {imageUrl && (
               <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
                 <Link href={hrefNote}>
-                  <img src={imageUrl} className='rounded lg:rounded-lg' style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt={text} />
+                  <img 
+                    src={imageUrl} 
+                    className='rounded lg:rounded-lg w-full h-full object-cover' 
+                    style={{ margin: 'auto' }} 
+                    alt={text}
+                    loading="lazy"
+                  />
                 </Link>
               </div>
             )}