feat(ui): implement shimmer skeleton loaders for complex data widgets

[ArshVermaGit]

Description

This PR standardizes the loading states across complex data-fetching components by replacing basic text and simple spinners (animate-pulse) with polished, animated skeleton loaders. By ensuring that the skeleton layouts perfectly match the dimensions of the final loaded content, we drastically reduce layout jumps (Cumulative Layout Shift) and improve the overall perceived performance for users.

Resolved Issue

Resolves #1553

Key Changes

• src/components/Skeleton.tsx: Added a new reusable skeleton component featuring a smooth, CSS-only shimmer gradient that adapts to both light and dark modes.
• globals.css: Introduced the @keyframes shimmer animation used by the new component.
• ProjectMetrics.tsx: Replaced the basic 4-box pulse with a tailored skeleton layout (header, 4 stats boxes, and recent issue rows).
• CodingActivityInsightsCard.tsx: Updated the loading state to mirror the exact dimensions of the activity bar chart and the three insight rows below it.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature / Enhancement (non-breaking change which adds functionality)
• UI/UX Improvement

How Has This Been Tested?

• Simulated slow network speeds in DevTools to ensure the new skeleton loaders display correctly.
• Verified that no layout jumping occurs when the components finish fetching data and render their final state.
• Confirmed the shimmer animation performs smoothly in both Light and Dark mode.
• Ran npm run build to ensure all modifications compile without type errors.

[vercel]

@ArshVermaGit is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[ArshVermaGit]

Hi @Priyanshu-byte-coder ! Issue #1553 has been resolved. Please review the PR and merge it under GSSoC. Thanks!

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!