Lazy Loading

También si quieren evitar el problema que dice @JuanDC, en el que las imágenes cargan pequeñas, la manera de solucionarlo es eliminando el CLS (Culmulative Layout Shift - Cambio de diseño acumulativo), que básicamente es cuando un elemento mueve el diseño después de cargar el html base, y resulta molesto para los usuarios.
ㅤ
Para esto existen varias técnicas, la mejor para mí es: Teniendo en cuenta el aspect ratio de la imagen, agregar un width y height fijo y proporcional al aspect ratio, para que con unas propiedades, css pueda calcular su tamaño, y siempre mantenga la proporción, también sirve para agregar un skeleton loader responsive a las imágenes.
¿Qué es el aspect ratio?
ㅤ
¿Pero esto qué significa, y cómo se hace?
Por ejemplo, en las imágenes de nuestro proyecto, ya sea que pidamos una imagen de 200x300, 300x450 … Etc. Estas imágenes (de los cards) siempre tendrán un aspec ratio de 2:3, ahora utilizaremos esto en código:

<img className="img-responsive" alt="imagen" width="200" height="300" />						

Para que CSS pueda calcular la altura, necesita las propiedades: aspect-ratio: n/n;, height: auto; y el width que necesitemos, en este caso puede ser 100%, porque en el código utilizo un grid

.img-responsive {
	aspect-ratio: 2 / 3; // O también 200 / 300
	border-radius: 1rem;
	height: auto;
	object-fit: cover;
	vertical-align: top;
	width: 100%;
}

También aquí hay información sobre el CLS, esta y otras técnicas para solucionarlo, en el que seguro lo explican más detallado, y mejor. 😅
ㅤ
Con esto, evitamos que cuando carguen las imágenes, muevan todo lo que está debajo de ellas, porque ya tienen su espacio asignado. 😃

Algo similar con el atributto loading, sin el intersectionObserver

movieImg.setAttribute('loading', 'lazy') 

Si las imagenes ya estan cargadas ya no es necesario el observer so…

if (entry.isIntersecting) {
	entry.target.setAttribute('src', url)
	lazyLoader.unobserve(entry.target)
}

antes del lazuLoading al verificar el performance de la aplicación con lighthouse mi rendimiento en mobile era del 3, después de implementarlo subió al51

Al final el profe dice:
si el height de las imágenes está en 0 no va a tomar el lazy
.
Esto es lo que pasa con las imágenes en la sección categoría. Por eso cargan todas al mismo tiempo.
.
Mi solución fue agregar esto al css

.genericList-container .movie-container .movie-img {
    height: 270px;
    min-height: 270px;
    max-height: 270px;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

mi aporte es no usar la función setAttribute o getAttribute, ya el objeto target, tiene el path

const lazyLoader=new IntersectionObserver(entries=>{
    entries.forEach(entry=>{
        if (entry.isIntersecting) {
            entry.target.src=entry.target.dataset.src;
        }
    });
});

Le agregué que deje de escuchar el nodo (imagen) cuando ya la cargó.
Es decir, que no la vuelva a cargar.

const lazyLoader = new IntersectionObserver((entries)=>{
    entries.forEach((image)=>{
        if (image.isIntersecting ) {
            const url = image.target.getAttribute('data-img');
            image.target.setAttribute('src', url);
            lazyLoader.unobserve(image.target);
        }
    });
});

Seguí los pasos de esta clase

Me encanta la actitud de Juan los cursos aparte de interesantes y importantes, son divertidos n.n

Aquí una respusta a cual es mejor: lazo loading o intersectionObserver.

https://stackoverflow.com/questions/72847077/img-loading-lazy-vs-intersection-observer

RPTA: intersection observer da más control…pero ambas opciones hacen lo mismo.

Y si no lo resolvimos de ninguna manera? :’(

Llevo un tiempo ya haciendo los cursos de programación y la verdad, no se me habría ocurrido hacer todo esto.

F para mí 😅