Replaced Bouncing Loader with Skeleton Loader – Closes #1156

[deepanshu-prajapati01]

This PR implements a major UI/UX enhancement by replacing the traditional bouncing/spinner loader with a skeleton loader across key content-loading areas.
This closes issue #1156

---

🎯 Motivation:

The original loader simply displayed a bouncing animation during data fetching, which:

• Didn't reflect the structure of the actual content.
• Made users feel like nothing was happening.
• Looked outdated in the context of modern UI standards.

---

✅ What’s New:

• 🔄 Replaced all instances of the old spinner/bounce loader with Skeleton UI components.
• 🧩 Skeletons now visually mimic the content structure (e.g., text lines, images, cards).
• 🌓 Fully supports both light and dark themes for seamless appearance.

---

📸 Before & After Preview:

Before:

After:

---

🚀 Benefits:

• Creates a modern and professional loading experience.
• Reduces perceived load time by showing layout previews.
• Keeps users visually engaged and improves UX across the app.
• Aligned with best practices followed in major platforms (YouTube, LinkedIn, etc.).

[vercel]

@deepanshu-prajapati01 is attempting to deploy a commit to the avdheshvarshney's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for code-a2z ready!

Name	Link
🔨 Latest commit	342c209
🔍 Latest deploy log	https://app.netlify.com/projects/code-a2z/deploys/68844b095aaf0e00085c1592
😎 Deploy Preview	https://deploy-preview-1157--code-a2z.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, join our discord server https://discord.gg/tSqtvHUJzE.

[deepanshu-prajapati01]

Added a skeleton loader to improve the loading experience.

Previously, before the page fully loaded, the old loader was displayed (as shown below). I’ve removed that loader and replaced it with a skeleton screen for a smoother and more modern UX.

Before:

After (with Skeleton):

[Avdhesh-Varshney]

Instead of rewriting the same code again & again, Create a new component with SkeletonLoader.jsx and load that component

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
code-a2z	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2025 11:49am

[deepanshu-prajapati01]

Absolutely, I'll get my PR updated shortly.

[deepanshu-prajapati01]

@Avdhesh-Varshney I've made the changes you requested. Please take a look and let me know if everything looks good to merge!

[Avdhesh-Varshney]

Cool! Perfect Contribution for main website 🎉

[Avdhesh-Varshney]

@deepanshu-prajapati01 I've sent you the invitation for Code-A2Z org.
Please accept!