div aspect-video for layout shift

Author: nemanjam

src/components/react/ImageRandom.tsx

@@ -58,15 +58,17 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) =>
 
   return (
     <>
-      <img
-        {...props}
-        src={imageSrc}
-        alt={imageAlt}
-        onClick={handleClick}
-        className={cn('cursor-pointer', className)}
-      />
-
-      {!imageSrc && <div className={cn('', className)}>placeholder</div>}
+      {imageSrc ? (
+        <img
+          {...props}
+          src={imageSrc}
+          alt={imageAlt}
+          onClick={handleClick}
+          className={cn('cursor-pointer', className)}
+        />
+      ) : (
+        <div className={cn('aspect-video', className)} />
+      )}
     </>
   );
 };

src/constants/image.ts

@@ -25,9 +25,9 @@ export const TW_SCREENS = {
 // add quality and loading in future
 export const IMAGE_SIZES = {
   FIXED: {
-    BLUR: {
-      width: 10,
-      height: 10,
+    BLUR_16_9: {
+      width: 16,
+      height: 9,
     },
     AVATAR: {
       width: 48,

src/libs/gallery/transform.ts

@@ -28,7 +28,7 @@ export const imageMetadataToImageProps = async (
 
   const blurImageProps = {
     ...astroImageProps,
-    ...IMAGE_SIZES.FIXED.BLUR,
+    ...IMAGE_SIZES.FIXED.BLUR_16_9,
   };
 
   const xsImageProps = {