ui: add Lazy loading for images>1MB

[codewithnick]

inital loading of hompage was loading around 12MB of resources. By lazy loading images we can reduce the intial loading by 7-8 MB.

Done

• [List of work items including drive-bys - remember to add the why and what of this work.]

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/
  • Be sure to test on mobile, tablet and desktop screen sizes
• [List additional steps to QA the new features or prove the bug has been resolved]

Issue / Card

Partially Fixes: #14443

Screenshots

[If relevant, please include a screenshot.]

Help

QA steps - Commit guidelines

[webteam-app]

codewithnick is not a collaborator of the repo

[petesfrench]

Hi @codewithnick, thanks for your contribution and sorry for the delayed reply.

Would you be able to rebase this PR please and we can merge it?

[codewithnick]

hi @petesfrench I have updated the pr ,please lmk if any other changes are required

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 69.76%. Comparing base (f2d73a2) to head (0a83735). Report is 10 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14448   +/-   ##
=======================================
  Coverage   69.76%   69.76%           
=======================================
  Files         120      120           
  Lines        3426     3426           
  Branches     1181     1181           
=======================================
  Hits         2390     2390           
  Misses       1012     1012           
  Partials       24       24           

---- 🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles