Feat loadingUI

[dev129]

What does this PR do?

This PR introduces a loading animation component (LoadingUI) that provides users with a visual indicator of progress while the main content is being loaded. The loading UI displays a bouncing image and a progress bar with a percentage indicator. This update improves user experience by making it clear when content is loading.

Fixes #80

Test Video

bandicam.2024-11-07.23-38-50-548.mp4

Desktop View:

Mobile View:

Type of change

• New feature (non-breaking change which adds functionality)

How should this be tested?

To test this PR:

1. Start the application and observe the loading UI during initial render.
2. Confirm that the progress bar increments smoothly to 100%.
3. Verify that, upon reaching 100%, the loading animation is hidden and the main content is displayed.
4. Test responsiveness and ensure the loading UI adapts to various screen sizes.

Test Cases:

• Test A: Ensure the loading animation and progress bar are displayed when the component mounts.
• Test B: Confirm that the progress bar fills incrementally to 100%, hiding the loading animation afterward.
• Incase of any issue, try reloading

Mandatory Tasks

• Self-reviewed the code for consistency, responsiveness, and correct implementation of the loading animation.
• Ensured smooth transition between loading UI and main content.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ai-content-generator	❌ Failed (Inspect)			Nov 7, 2024 6:44am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

❌ Deploy Preview for cool-boba-2a2b34 failed. Why did it fail? →

Name	Link
🔨 Latest commit	8c14646
🔍 Latest deploy log	https://app.netlify.com/sites/cool-boba-2a2b34/deploys/672c61b3341e900008e391c3

[dev129]

Hi @iamkanhaiyakumar @GauravKesh , are we still on ?

[GauravKesh]

All good

[GauravKesh]

Hi @iamkanhaiyakumar @GauravKesh , are we still on ?

@dev129 Yes

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀

[github-actions]

🎉🎉 Thank you for your contribution! Your PR #81 has been merged! 🎉🎉