search

codegouvfr / react-dsfr

🇫🇷 The French Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
405 stars 51 forks source link

Card: feat lazy loading des images #284

Open totakoko opened 1 month ago

totakoko commented 1 month ago

:wave:

Auparavant on utilisait directement le markup HTML DSFR des Card pour lazy loader les images (grosse liste d'actus). Avec react-dsfr, il n'y a pas d'attributs loading, donc toutes les images sont téléchargées.

https://github.com/codegouvfr/react-dsfr/blob/137c8a638bc70b8b0aa3181c8a02dd5d8975702f/src/Card.tsx#L226-L230

Est-ce que ça vous irait si je fais une PR pour ajouter le paramètre loading="lazy" à l'élément img ? Je dirais qu'on peut l'ajouter par défaut, mais si on veut être sûr de ne rien casser, le mettre derrière une propriété lazyLoadImage marche aussi. Qu'en pensez-vous ?

garronej commented 1 month ago

Oui top, par default ça me parais bien juste a voir pour la taille peut être.
Il faut s'assurer que ça marche correctement quand l'immage est en train de charger et qu'on a pas un mega layout shift