[Feature] Implement an Initial Loading Screen

[Papia-tech]

Description

Currently, the application lacks a visual indicator for users during the initial data fetching or rendering phase. Adding a loading page or splash screen would improve the User Experience (UX) by providing immediate feedback while the application initializes.

Proposed Solution

• Component Creation: Develop a reusable loading component (e.g., using a spinner or a themed logo animation).
• Initial State Management: Implement logic to display this loading screen upon the first visit until the main content is ready to be mounted.
• Styling: Ensure the loading page matches the existing theme and UI/UX design found in the repository.

Implementation Plan

• Add a Loading component to the components directory.
• Update the main entry point (likely the App or Root component) to handle the loading state.
• Test across different network speeds to ensure the transition is smooth.

[Papia-tech]

Hi @Piyushydv08, I would like to work on this issue under GSSoC'26. Please assign it to me.

[saksham91108]

Hi @Piyushydv08 👋

I'd love to work on this issue! I've reviewed the codebase and understand what's needed to improve the initial loading experience.

Here's my plan:

• ✅ Create a reusable LoadingScreen component with a spinner and themed logo animation
• ✅ Match the existing UI/UX design and color theme of the app
• ✅ Add loading state logic to the main App/Root component
• ✅ Ensure smooth transition once content is ready to mount
• ✅ Test across different network speeds for a polished experience

Could you please assign this issue to me? I'll have a PR ready soon!

[Sumitsutharss]

Hi @Piyushydv08 👋

I reviewed the codebase and would like to work on this issue under GSSoC'26 if it is still available.

I have already analyzed the implementation approach and can create a reusable loading screen component integrated with the app initialization flow while matching the existing SafeVoice design system.

Kindly assign it to me if available. Thank you!

[Sumitsutharss]

Hi @Piyushydv08 👋

I have completed the implementation and submitted a PR for review.

PR: #174

Implemented

• Reusable LoadingScreen component
• SafeVoice branding and tagline
• Smooth fade-in/fade-out transition
• Loading spinner
• Dark mode support
• Accessibility support (role="status", aria-live="polite")

Tested

• Initial application load
• Multiple refresh scenarios
• Light and dark mode
• Production build (npm run build)

Looking forward to your feedback. Thank you!