(feat): Add lazy loading for images

[senthil-athiban]

PR Fixes:

This PR introduces LazyLoadImage, a library that enables lazy loading of images using react-lazy-load-image-component. Aims to improves performance by delaying image loading until they're needed, reducing initial page load times and conserving bandwidth

Resolves #783

Checklist before requesting a review

• I have performed a self-review of my code
• I assure there is no similar/duplicate pull request regarding same issue

[siinghd]

@senthil-k8s i would not use this ,please try to create a custom lazy load component with Image(component) of nextjs.

it can be a simple component with a state like:

const [loading,setLoading] = useState(true);
<Image
...
onLoad={(e) => setLoading(false)} 
/>

Just search little bit online for optimizations etc

[senthil-athiban]

@siinghd Using the Image component of Next.js requires width and height, in the existing img tag in our codebase, I couldn't find the specified width and height. Shall I use the Image component of Next.js or the default img tag?

Demo: https://www.loom.com/share/d622a54442214bd3b6e33bacdb43a4a6

[siinghd]

@senthil-k8s Use nextjs and provide width and height suitable

[senthil-athiban]

@siinghd Done!

[siinghd]

what is this complex logic? NextJs Image its already loas images like that...
what i was saying is until the image isnt loaded show the skeleton

[senthil-athiban]

This is to observe the viewport by writing custom logic. Utilizing this LazyLoadImage component, we can customize our own skeleton, and styling effect.