feat: Improve image loading and styling with opacity transitions and simplified layout

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx

@@ -39,7 +39,7 @@ const Image: React.FC<ImageProps> = ({
   }, [src]);
 
   return (
-    <figure className={imageContainer}>
+    <div className={imageContainer}>
       <div
         className={imageWrapper({
           hasWidth: !!format?.block_width,
@@ -53,20 +53,20 @@ const Image: React.FC<ImageProps> = ({
                   ? '100%'
                   : `${format.block_width}px`
                 : '100%',
+          aspectRatio: format?.block_aspect_ratio
+            ? `${format.block_aspect_ratio}`
+            : 'auto',
         }}
       >
         {!isLoaded && (
           <div
             className={placeholder}
             style={{
-              width:
-                format?.block_aspect_ratio && format.block_aspect_ratio < 1
-                  ? `${format.block_aspect_ratio * 100}%`
-                  : format?.block_width
-                    ? format.block_width > MAX_WIDTH
-                      ? '100%'
-                      : `${format.block_width}px`
-                    : '100%',
+              width: format?.block_width
+                ? format.block_width > MAX_WIDTH
+                  ? '100%'
+                  : `${format.block_width}px`
+                : '100%',
               aspectRatio: format?.block_aspect_ratio
                 ? `${format.block_aspect_ratio}`
                 : 'auto',
@@ -104,7 +104,7 @@ const Image: React.FC<ImageProps> = ({
           })}
           src={src}
           alt={alt}
-          loading={priority ? 'eager' : 'lazy'}
+          loading="lazy"
           onLoad={() => setIsLoaded(true)}
           width={format?.block_width}
           height={format?.block_height}
@@ -120,7 +120,7 @@ const Image: React.FC<ImageProps> = ({
           <MemoizedRichText richTexts={imageCaption} />
         </figcaption>
       )}
-    </figure>
+    </div>
   );
 };
 

packages/notion-to-jsx/src/components/Renderer/components/Image/styles.css.ts

@@ -23,9 +23,6 @@ export const imageWrapper = recipe({
     position: 'relative',
     maxWidth: '100%',
     width: fallbackVar(imageWidthVar, '100%'),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   variants: {
     hasWidth: {
@@ -51,9 +48,12 @@ export const styledImage = recipe({
   },
   variants: {
     loaded: {
-      true: {},
+      true: {
+        opacity: 1,
+      },
       false: {
-        display: 'none',
+        opacity: 0,
+        height: 0,
       },
     },
     hasAspectRatio: {