Novos Hooks e Lazy Loading de Componentes

[dhanielsales]

Objetivo da PR:

Esse PR tem como objetivo adicionar ao projeto dois novos Hooks e uma função de debounce para facilitar criações futuras. 🔧🔧🔧

Modificações gerais

1. Criado novo Hook chamado useWindowConstraints com foco na detecção de informações da window. As informações são:

• Tamanho vertical (height);
• Tamanho horizontal (width);
• Scroll no eixo y (Distância em que o inicio da window se encontra em relação ao topo do documento);
• Scroll no eixo x (Distância em que o lado esquerdo da window se encontra em relação ao lado esquerdo do documento);

2. Criado novo Hook chamado useIntersectionObserver com foco na detecção se um componente se encontra no viewport. Esse Hook recebe como propriedades uma ref do objeto que deseja observar quando ele irá entrar na viewport e também uma função que será disparada no ato.

Extra: Adicionei também uma função de debounce para usos gerais o projeto. 😄

Demo

Criei uma rota /demo-hooks para visualizar essas novas ferramentas, nela vc encontrará no canto superior esquedo as informações do hook useWindowConstraints, como na foto abaio:

Demo: https://tabnews-git-fork-dhanielsales-feat-hooks-filipedeschamps.vercel.app/demo-hooks

Além disso fiz um componente de imagem com uma feature de Lazy Loading, nela a requisição de carregamento da imagem só ocorrerá quando o componente estiver na viewport e enquanto não estiver, é exibido um outro componente como "Skeleton", como nas imagens abaixo:

Bom, espero que tenha ajudado com algo, se tiverem alguma sugestão, crítica ou melhoria, por favor, coloquem no PR. ✊✊✊

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/filipedeschamps/tabnews/2Rz27ZgjR5Sw3NfWKxrmyTLPm4uW
✅ Preview: https://tabnews-git-fork-dhanielsales-feat-hooks-filipedeschamps.vercel.app

[brunofamiliar]

Cara, achei sensacional essa ideia! Acredito que pode ser utilizado para tratar as imagens do tabnews.

[dhanielsales]

Cara, achei sensacional essa ideia! Acredito que pode ser utilizado para tratar as imagens do tabnews.

Obrigado cara. 😃

Posteriormente irei melhorar a implementação e deixar mais customizável.

[filipedeschamps]

Que show @dhanielsales , testei aqui e funcionou tudo certinho 😍

Como você vê o seu Hook em comparação ao disponível no Next.js? Pelo menos na parte do lazy loading 👍

*E em paralelo, é MUITO bom ter a URL de Preview para ver as coisas de fato 🤝

[wcarugatti]

Só eu caio nisso em todas as url de preview?

[filipedeschamps]

@wcarugatti tá certo, porque o root do site não tem nenhuma página. Você precisa acessar um arquivo em específico, por exemplo o demo-hooks.js que fica disponível no /demo-hooks: https://tabnews-git-fork-dhanielsales-feat-hooks-filipedeschamps.vercel.app/demo-hooks

[dhanielsales]

Fala @filipedeschamps, tudo tranquilo? Muito bom ter vc conosco.

Sobre o que foi levantado por você: Não sou o maior entendedor de como funciona a Feature de next/image do NextJs, mas até onde me lembro bem, ela trabalha com buffering da imagem, e optimização dela pra um tamanho e proporção que atenda a necessidade, com a menor perca possível de qualidade.

O Hook que eu propus traz a detecção do que entra no ViewPort da window, não se trata de um lazy loading de imagem em si, isso seria uma das utilizações para ele. Essa semana inclusive, trabalhei com uma página com diversas animações, que só poderiam ser disparadas quando o componente entrar no "campo de visão" do usuário e eu utilizei ele(Hook) para isso.

Pra finalizar, eu utilizei o useIntersectionObserver no lazy load de imagens carregadas com a tag <img /> padrão no HTML, mas acho que pra um cenário ideal, seria bom utilizar o próprio next/image em conjunto com o Hook, pra trazer um imagem já muito otimizada em conjunto com o lazy loading dela.

Por favor, se eu falei alguma besteira kkkk, sinta-se a vontade em me corrigir.

😃

[filipedeschamps]

@dhanielsales o meu conhecimento de apps avançados em React é muito pouco, não vai ser eu quem vai dizer que você falou alguma besteira 😂

Em paralelo, to tentando visualizar algum cenário dentro do TabNews em que vamos utilizar todo esse controle (e que já não seja coberto pelo componente do Next.js no caso das imagens). Dado aos layouts que desenhamos, onde você vê isso sendo aplicado? 🤝

[dhanielsales]

@filipedeschamps Acabei demorando pra responder, os ultimos dias foram bem corridos kkk.

Bom, eu consigo pensar em vários casos de uso para esse Hook, mas de fato nao consegui pensar em algo que precisaríamos implementar de imediato. Talvez carregamente de um um feed "infinito" quando o ultimo item estiver na tela, mas isso poderia ser implementado sem ele também.

Acho que poderíamos deixar pra incluir esses hooks no projeto quando surgir as necesidades. 🙂

[filipedeschamps]

Show @dhanielsales 😍 topa então fechar esse PR? E independente de não fazermos o merge agora, seu nome com certeza será listado na área dos contribuidores 🤝

[dhanielsales]

Claro, com certeza!

[filipedeschamps]

@dhanielsales fechando então esse PR para avançarmos nessa issue da Milestone 0 👍