Usando Intersection Observer

Lo que se logra con esto es una especie de LazyLoad de las imágenes, porque técnicamente ya se tiene toda la información lista para mostrar, cuando se empiece a usar la base de datos de manera correcta, estaríamos haciendo una petición grande de igual manera para solo mostrar las 3 primeras.

Mi manera de hacer esto sería la siguiente: Hacer un “infinite loader”, solo hacer fetch de las tres primeras cards y crear un elemento abajo de ListOfCards con un intersection observer, el cual, al activarse realice otro pedido de otras 3 cards a la db y renderizarlas. En cuanto al lazy load de las imágenes, se puede utilizar el api lazy de html o en su defecto una dependencia de terceros. Esto es, tal y como es Instagram

¿Extrañas a Leonidas?

• Intersection Observer por Leo

Yo hice uso Intersection Observer, un poquito diferente, hago un solo IntersectionObserver que vigile a todos los elementos, peuden verlo en este link:
https://github.com/SoyOscarRH/SoyOscarRH.github.io/blob/master/Webpage/Code/Helpers/lazyLoadImages.ts

Y solo lo ejecutan una sola vez como por ejemplo:

import lazyLoadImages from ".../lazyLoadImages"
document.addEventListener("DOMContentLoaded", lazyLoadImages)

Y las imagenes al final tienen que tener el src de una imagen por defecto (un placeholder), como por ejemplo:

<img
        className="lazy"
        data-src={`Assets/${folder}/${name}`}
        src={"Assets/Blank.png"}
/>

Y si lo quieren ver en vivo y directo:
https://SoyOscarRH.github.io/

Esto es lo mas hermoso que he visto desde que programo con javascript. Que gran clase.

esta clase me volo el cerebelo

Andaba buscando esta funcionalidad 🙂👍
Lazy Loader -> Intersection Observer API

• Buenisima clase!!

La verdad si yo hacía esto por mí mismo no me habría dado cuenta que el error yacía en la altura de los articles. Simplemente qué genial el profesor! Estoy aprendiendo mucho

No estoy muy seguro si entendí del todo lo que es ref, pero luego de reflexionarlo un rato esta sería mi síntesis.
'
Dado a que no estamos usando classNames, lo que podemos hacer es usar la propiedad ref para capturar un grupo de elementos del DOM o capturarlo uno a uno y pasarlos al Intersection Observer para luego renderizar su contenido cuando entren al viewport cambiando el state de cada uno a show = true.
'
Algo que no me queda claro es, ¿por qué el useEffect tiene que estar viendo el cambio de ref?. Probé quitando el ref al final del useEffect, dejando un array vacío y funciona igual. Según entiendo es porque el useEffect no se ejecuta en el cambio de la referencia, si no, que lo que se ejecuta es el Intersection observer que le pusimos a cada elemento.

¿Estamos conscientes del poder de este pequeño pedazo de código que puede ser reutilizado para manejar el LazyLoad de cualquier componente??!!! Que gran clase!!

Super lo de Lazy Loader 😃👍

Esta clase me gusto

Wow, no sabia esto del Observer

Un atajo para los<Fragments /> seria simplemente usar ```
<> </>

Por ejemplo:


```js
        <>
          <a href={`/detail/${id}`}>
            <ImgWrapper>
              <Img src={src} alt='photo' />
            </ImgWrapper>
          </a>

          <Button>
            <MdFavoriteBorder size='32px' /> {likes} likes!
          </Button>
        </>

Lazy loading ahora forma parte del estándar HTML. Checar como funciona <img loading="lazy" /> funciona en React.

No entendi mucho que es el viewport…

Excelente clase! No se hace el request hasta que el elemento se encuentre en el viewport.

Adicionalmente agregué el threshold al objeto de configuración del IntersectionObserver.

useEffect(
    function() {
      const observer = new window.IntersectionObserver(
        function(entries) {
          const { isIntersecting } = entries[0];
          if (isIntersecting) {
            setShow(true);
            observer.disconnect();
          }
        },
        {
          threshold: 0.5
        }
      );
      observer.observe(element.current);
    },
    [element]
  );```

Mis comentarios

import React, { useEffect, useRef, useState, Fragment } from "react";
import { Article, ImgWrapper, Img, Button } from "./styles";
import { MdFavoriteBorder } from "react-icons/md";

const DEFAULT_IMAGE =
  "https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_cats.jpg";

export const PhotoCard = ({ id, likes = 0, src = DEFAULT_IMAGE }) => {

  // Iniciarlizar la referencia que se usara en Article
  const element = useRef(null)

  // Inicializar estado de show
  const [show, setShow] = useState(false)

  useEffect(function () {
    //console.log(element.current)
    const observer = new window.IntersectionObserver(function (entries) {
      //console.log(entries)

      // Obtener el elemento isIntersection
      const { isIntersecting } = entries[0]
      console.log({ isIntersecting })

      // Sí hace intersección entonces cambiar el el valor de show
      if (isIntersecting) {
        console.log('si, esta haciendo intersección')
        setShow(true)

        // Una vez hecho el render ya no es necesario observar ese elemento, ayudará al performance.
        observer.disconnect();
      }
    });

    // Iniciar el observador
    observer.observe(element.current);
  }, [element]);

  return (
    <Article ref={element}>
      {
        show && <Fragment>
          <a href={`/detail/${id}`}>
            <ImgWrapper>
              <Img src={src} />
            </ImgWrapper>
          </a>

          <Button>
            <MdFavoriteBorder size='32px' /> {likes} likes!
          </Button>
        </Fragment>
      }

    </Article >
  );
};

Esto es lo mismo que colocarle a la imagen loading=“lazy” ?

No me quedó muy claro lo de la altura de cada elemento

NO entiendo la logica, si el Return se ejecuta al finalizar la funcion, como es posible que le asigne a Ref su valor?

Genial

Trabajo todos los días con jquery, y ver lo sencillo que fue con componentes y react hacer el lazy loading sin librerias externas me vuela la cabeza. Genial delivery de contenido

increible esta clase, aqui se puede notar el porque los Hooks son tan útiles, y todo relativamente en muy pocas líneas de codigo!

Excelente, muy volado!

Lazy Loader Excelente!!! usando React y intersectionObserver API

Lazy Loader Excelente!!! usando React y intersectionObserver API

Esta clase me estalló la cabeza, esta brutal!!!

Gran clase.

Excelente! Y que bueno el profesor explicando

que buena clase!

Pregunta

¿Seria mejor aplicar el Intersection Observer en ListOfPhotoCards para cargar de 3 en 3 las PhotoCards?

https://platzi.com/clases/1642-javascript-profesional/22175-intersectionobserver/

En este curso se explica un poco mas en detalle el Intersection Observer

Este curso va de mejor a mucho mejor!

Que nivel!!!

Que efectos puede traer el no realizar el observer.disconnect ?

En las dependencias del useEffect hemos puesto a “element”, mi pregunta es qué debe pasar con element para que se considere que ha cambiado y se lanze el efecto: ¿Que haga referencia a un elemento distinto?, ¿que lo referenciado, es decir el <Category>, sufra algún cambio? o ¿alguna otra cosa?

Slds.

Qué tremenda clase, sabía como implementar el IntersectionObserver en Vanilla JS, pero tenía curiosidad de cómo hacer en React, increíble 🤯

Excelente clase…!!

Hola! luego de escribir show && <Fragment… etc en el componente, no renderea mas las fotos… sera que podrias ayudarme? A alguien mas le sucedio? Gracias!

Son increíbles estas clases. Lo que aprendo en cada una es genial. Una cosa que me encanta es como el profe sin querer (o capaz no) tiene errores, y al “debugearlos” me ayuda a entender mucho más la lógica del código.
Super contento con este curso!! 😃

Si se fijan cuando los elementos salen de la pantalla se siguen renderizando, y también hay 2 categorías renderizandose ¿como se puede hacer para que al salir se desrendericen?

alguien sabe cual es el color theme de visual studio que utiliza el profesor?

practica, pero en esta parte me sale error 😦

Muy bien explicado, tuve que verlo 3 veces para entenderlo, lo mejor ya entiendo un poco más los hooks, gracias

n

Hola, les dejo el avance de mi repositorio hasta acá hecho en Nextjs:

https://github.com/danyel117/petgram-platzi/tree/lazyload