set image size in server component to prevent layout shift, works

Author: nemanjam

docs/working-notes/todo4.md

@@ -106,6 +106,13 @@ add delay to fetch new page, debounce
 phone tap on backdrop doesnt close lightbox
 responsive page size
 usehooks, isVisible or observer hook for infinite scroll, thumbnail, scroll to top
+
+// important for size of all client components
+height and width MUST be defined ON SERVER component to prevent layout shift 
+
+----
+img srcset
+copy hooks for width for page size and observer form react-use or usehooks
 ```
 
 

src/components/ImageRandom.astro

@@ -1,11 +1,22 @@
 ---
 import ImageRandomReact from '@/components/react/ImageRandom';
+import { IMAGE_SIZES } from '@/constants/image';
 import { getImagesProps } from '@/libs/gallery/images';
+import { cn } from '@/utils/styles';
 
-// forward Astro (MDX) class attr to className React
 const { class: className, ...props } = Astro.props;
 
 const galleryImages = await getImagesProps();
+
+// add 'px' suffix or styles will fail
+const { width, height } = Object.fromEntries(
+  Object.entries(IMAGE_SIZES.FIXED.MDX_XL_16_9).map(([key, value]) => [key, `${value}px`])
+);
 ---
 
-<ImageRandomReact {...props} {className} {galleryImages} client:load />
+{/* height and width MUST be defined ON SERVER component to prevent layout shift */}
+{/* set height and width to image size but set real size with max-height and max-width */}
+
+<div class={cn('max-w-full max-h-96 my-8', className)} style={{ width, height }} {...props}>
+  <ImageRandomReact {galleryImages} client:load />
+</div>

src/components/react/ImageBlurPreloader.tsx

@@ -20,6 +20,8 @@ const ImageBlurPreloader: FC<Props> = ({
   onSrcLoaded,
   className,
   divClassName,
+  width,
+  height,
   ...props
 }) => {
   const [hasLoaded, setHasLoaded] = useState(false);
@@ -51,9 +53,15 @@ const ImageBlurPreloader: FC<Props> = ({
   return (
     <>
       {imageSrc ? (
-        <img {...props} src={imageSrc} className={cn('', className)} />
+        <img
+          {...props}
+          src={imageSrc}
+          width={width}
+          height={height}
+          className={cn('object-cover', className)}
+        />
       ) : (
-        <div className={cn('aspect-video', divClassName)} />
+        <div className={divClassName} />
       )}
     </>
   );

src/components/react/ImageRandom.tsx

@@ -10,6 +10,7 @@ import type { FC, ImgHTMLAttributes } from 'react';
 interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   // Important: must pass all allImagesSrc from the server or they wont be included on client
   galleryImages: ImageProps[];
+  divClassName?: string;
 }
 
 const imageAttributes: ImageAttributes = {
@@ -25,7 +26,7 @@ const initialImage: ImageProps = {
   xl: { ...imageAttributes },
 };
 
-const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) => {
+const ImageRandomReact: FC<Props> = ({ galleryImages, className, divClassName, ...props }) => {
   const randomImage = useMemo(() => getRandomElementFromArray(galleryImages), [galleryImages]);
 
   const [image, setImage] = useState(initialImage);
@@ -49,10 +50,13 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) =>
       {...props}
       blurSrc={image.blur.src}
       src={image.xl.src}
+      width={image.xl.width}
+      height={image.xl.height}
       onSrcLoaded={() => setHasLoaded(true)}
       alt={imageAlt}
       onClick={handleClick}
-      className={cn('cursor-pointer', className)}
+      className={cn('cursor-pointer w-full h-full my-0', className)}
+      divClassName={cn('w-full h-full', divClassName)}
     />
   );
 };

src/layouts/Centered.astro

@@ -13,7 +13,7 @@ const { class: className } = Astro.props;
 ---
 
 {/* flex here to take full height for pagination, flex-row align-stretch */}
-{/* h-full dosent work without all parents h-full */}
+{/* h-full doesn't work without all parents h-full */}
 
 <Base {...props}>
   <main

src/layouts/Page.astro

@@ -32,6 +32,7 @@ const metadata = { title, description, image };
 ---
 
 <Centered {metadata} class={cn(className)}>
+  {/* must not have flex, it will disable margin collapsing */}
   <article class="my-prose">
     <slot />
   </article>

src/pages/index.mdx

@@ -8,7 +8,7 @@ import ImageRandom from '../components/ImageRandom.astro';
 
 # Hello and welcome
 
-<ImageRandom class="w-full sm:max-h-96 object-cover" /> 
+<ImageRandom /> 
 
 Welcome to my coding blog. Here, I will share my coding experiments and thoughts on React.js, Next.js, Node.js, Astro, Python, DevOps, and more. Feel free to read, explore, and comment. Or, if you are feeling overwhelmed by coding, you can take a break and enjoy some random landscape photos.