Add lazy loading to custom component images for performance improvements

[hichemfantar]

Implement lazy loading for images across various components to enhance performance and reduce initial load times.

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	aea8438
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6779d5e18107ed00088a209f
😎 Deploy Preview	https://deploy-preview-4424--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Simek]

Adding loading="lazy" is only recommended for images placed not in the initial user viewport, otherwise lazy loading could lead to worse feeling for the users, see:

• https://www.w3schools.com/tags/att_img_loading.asp

For most altered components we cannot guarantee they will be below the fold.

Also, the Firefox has a know issue where the order of attributes matter, and loading need to be placed before src attribute, and the prop it itself have some requirements which need to be met which can also slow down the total time website takes to load:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading#usage_notes

For now, I'm leaning into leaving the code as-is, but if you can provide a performance analysis which will show that there is a meaningful benefit thanks to the changes, it would be a great way to win me over in this case!