Estoy usando webpack para agrupar una aplicación, esta aplicación tiene un componente que carga imágenes de forma diferida cuando se desplazan a la ventana gráfica usando el observador de intersección. Como algunas de estas imágenes son verticales y otras horizontales, quiero una solución que me permita evitar el "efecto palomitas de maíz" mientras las imágenes aún se están cargando. Una forma en que pensé en hacer esto fue calcular las dimensiones de la imagen en el momento de la compilación y pasarlas al componente, algo así como:

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

... que cuando ejecuto mi script de compilación produce algo como...

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

De esa manera, el marcador de posición (antes de que se cargue el pulgar) tendría las mismas dimensiones de la imagen del pulgar que finalmente se carga.

Gracias de antemano por cualquier ayuda o consejo que pueda proporcionar.