[Feat] Loading Animation before Landing Page

[dev129]

Description

Hi @GauravKesh @iamkanhaiyakumar

Issue Title: Add Loading Animation to Landing Page

Description: To enhance the user experience, a loading animation should be added to the landing page. This feature will create a smoother transition as users wait for the content to load, improving the visual appeal and perceived performance.

Aim: The goal is to implement a loading animation that displays when the landing page is being loaded and disappears when the content is ready. The animation should last for a brief period, ideally a few seconds, to engage users without causing delays.

Proposed Changes:

• Develop a visually appealing loading animation that complements the current design.
• Implement conditional rendering logic to show the loading animation before the main content loads.
• Ensure the loading animation does not significantly impact page load performance.
• Verify compatibility across different browsers and screen sizes to maintain responsiveness.

Acceptance Criteria:

• The loading animation appears when the landing page is accessed.
• The animation is displayed for a set duration or until the content is ready.
• Smooth transition from the loading animation to the main content.
• No noticeable performance issues due to the loading animation.
• Works seamlessly on both desktop and mobile devices.

Screenshots

No response

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[dev129]

Hi @GauravKesh @iamkanhaiyakumar , this is the loadingUI page, what do have a say on this ? https://github.com/user-attachments/assets/18658021-8448-4e3d-be87-fe4c4a2a3763

[GauravKesh]

@dev129 It's looking great

[GauravKesh]

@dev129 You can create a PR