feat: add skeleton loading states for Profile and Roadmap pages

[nishupr]

Summary

Closes #633

Replaces basic spinners and blank loading states with sleek, animated skeleton loaders using Tailwind CSS animate-pulse utilities, reducing layout shifts and improving perceived performance while Firebase data is being fetched.

Changes Made

Profile Page (UserProfile.tsx)

• Projects section: Replaced spinner with a skeleton grid (4 placeholder cards) matching the actual project card layout
• Followers modal: Replaced spinner with 5 skeleton rows (avatar + name/username placeholders + action button shape)
• Following modal: Replaced spinner with the same skeleton row pattern as Followers

Roadmap Page (SkillTreeVisualizer.tsx)

• The loading state from useLearningProgress() was previously unused, causing roadmap nodes to render before progress data arrived
• Added an early-return skeleton state that renders pulsing placeholders for the progress panel, path selector, and tree nodes (in their exact final positions) while data loads

Other

• package-lock.json updated after installing a missing dependency (html-to-image) that was causing a build error unrelated to this feature

Why this change?

Previously, users saw blank screens or basic spinners while Firebase data loaded, which could cause layout shifts once content appeared. Skeleton loaders give immediate visual feedback and match the final layout shape, so content "pops in" smoothly without shifting the page.

How to test?

1. Open Chrome DevTools → Network tab → set throttling to "Slow 3G"
2. Visit /profile — observe skeleton placeholders for Projects, then open Followers/Following modals
3. Visit /roadmaps/frontend or /roadmaps/backend — observe pulsing skeleton nodes before the interactive tree renders

Type of Change

• UI/UX enhancement (non-breaking)

[Aditya948351]

@nishupr Are your all Merged PRs being counted on this repo in GSSOC Dashboard?
If any PR is missing there You can comment on Pinned Issue #429!