Fix: Implement Global and Image Loading States

[kunal-bunkar]

Description

This PR implements proper loading states across the application to improve user experience, prevent layout shifts, and enhance performance during page initialization.
Previously, the website displayed blank or unstyled content while resources (images, animations) were loading. This caused layout shifts and poor UX, especially on slow networks.

##Key Changes
-Added a global loading spinner with skeleton layout
-Wait for all critical images to load before rendering main content
-Temporarily hide navbar and footer during loading
-Converted Features component images from to Next.js
-Added shimmer animation to skeleton loaders
-Ensured loading states are accessible (role="status", aria-live="polite")

Fixes #298

Type of change

• Bug fix (non-breaking CHANGE which fixes an issue)
• New feature (non-breaking change which adds functionality)
• UI/UX update (design changes, interface improvements)

How Has This Been Tested?

-Tested with Slow 3G throttling → Spinner and skeletons display correctly
-Disabled cache → No noticeable layout shifts
-Tested on mobile viewport → Layout remains stable
-Verified accessibility → Screen reader announces loading state

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

Maintainer Checklist

• closes Missing Loading States in Application #298

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7ffee07a-aba7-4169-bb60-6f0990f06964

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.