Feat: Implement Image Placeholder to Prevent Blank Screen During Loading

[tejasbenibagde]

Describe the feature

Problem

Currently, when images are loading on the pages, users may experience a blank space or a blurry effect, which detracts from the overall user experience. This can be especially noticeable during navigation between pages.

Suggested Solution

To enhance the user experience, I propose implementing an image loading placeholder similar to the behavior in Next.js. This would involve:

• Displaying a skeleton loader or a blurred placeholder image while the actual image is loading.
• Once the image is fully loaded, the placeholder would be replaced with the actual image.

Benefits

• Improves visual consistency during image loading.
• Provides users with a smoother experience, reducing the perception of loading times.
• Helps prevent layout shifts that can occur when images load.

Additional Context

Implementing a loading placeholder will ensure that users do not see a blank screen, creating a more polished and user-friendly interface.

Related Issues

• (Link to any relevant issues if applicable)

Add ScreenShots

As you can see in the provided screen shot that a user will see the blank screen because the images are not yet loaded. this is not at all a good user experience.

Record

• [X] I agree to follow this project's Code of Conduct
• [X] I'm a gssoc-24-extd contributor
• [X] I want to work on this issue

[github-actions[bot]]

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project. for more information join our discord https://discord.gg/Jh3bWQ7FRN

[RamakrushnaBiswal]

You can add a loader for that Coffee 🍵 type of loader gif

[RamakrushnaBiswal]

Send some screenshot of loader

[tejasbenibagde]

I am not adding the loader. I'll be adding the placeholders similar to the ones provided by the nextjs.

[tejasbenibagde]

you can refer to this documentation page if you'd like to learn more about it https://nextjs.org/docs/pages/api-reference/components/image

[RamakrushnaBiswal]

I think loader is good for landing page and in reservation page you can that

[tejasbenibagde]

I can add the preloader in the website also the page transition similar to my old portfolio site https://tejas-benibagde.netlify.app/ if you want me to do this I can add a issue regarding this. Please let me know.

[RamakrushnaBiswal]

Do both I will give it level 2 Preloader like coffee loading typo of

Also I will review PR at night

[tejasbenibagde]

ok for now I'm opening a issue for this

[tejasbenibagde]

Please merge my pending pr so that I can start working on the new one.

[RamakrushnaBiswal]

Bro my classes from 1:30 to 6:30 so I will review PRs at night 🥲

You can create a new branch and start working

[tejasbenibagde]

Bro I'm on a full time job and doing this with the office PC lol.