I am using webpack to bundle an application, this app has a component that lazy loads images when they are scrolled into the viewport using intersection observer. As some of these images are portrait and others landscape I want a solution that enables me to prevent the 'popcorn effect' whilst the images are still loading. One way I thought about doing this was to compute the image dimentions at build-time and pass them into the component, something like:

<LazyLightbox
  src={imageSrc}
  thumbSrc={thumbSrc}
  thumbWidth={() => someWebpackFunctionThatComputesWidth(thumbSrc)}
  thumbHeight={() => someWebpackFunctionThatComputesHeight(thumbSrc)}
/>

... which when i run my build script produces something like...

<LazyLightbox
  src={imageSrc}
  thumbSrc={thumbSrc}
  thumbWidth={'200px'}
  thumbHeight={'120px'}
/>

That way the placeholder (before the thumb loads) would be the same dimentions of the thumb image that eventually loads.

Thanks in advance for any help or advice you can provide.