feat(dashboard): add unified WidgetSkeleton loading states

[sureshsuriya]

Summary

Adds a unified loading skeleton system for dashboard widgets to eliminate layout shifts and loading flicker while data is being fetched. This improves perceived performance and provides a more polished user experience, especially on slower network connections.

Closes #2609

---

Type of Change

• ✨ New feature (non-breaking change that adds functionality)

• ⚡ Performance improvement

---

What Changed

• Added a reusable WidgetSkeleton component for dashboard loading states.

• Added shimmer animation styles in src/app/globals.css.

• Replaced existing ad-hoc loading placeholders and animate-pulse implementations with consistent skeleton layouts.

• Updated dashboard widgets to render structural skeletons that closely match final content dimensions.

• Reduced layout shifts (CLS) when dashboard data loads.

• Improved visual consistency across dashboard widgets.

Updated components include:

• ContributionGraph

• PRMetrics

• GoalTracker

• TopRepos

• StreakTracker

• WeeklySummaryCard

• FriendComparison

• IssueMetrics

• PinnedRepos

• ContributionHeatmap

• PRBreakdownChart

• CommitTimeChart

• LanguageBreakdown

• PersonalRecords

---

How to Test

1. Start the application locally.

2. Open the dashboard page.

3. Enable Slow 3G throttling in browser DevTools.

4. Refresh the dashboard.

5. Observe loading states for all widgets.

Expected result:

• Skeletons appear immediately while data loads.

• Skeleton dimensions closely match final widget layouts.

• No noticeable layout shifts occur when data loads.

• Shimmer animation displays correctly.

• Widgets transition smoothly to loaded content.

---

Screenshots / Recordings

Before | After -- | -- Loading flicker and layout shifts | Consistent skeleton loading states with stable layout

---

Checklist

• Linked the related issue above

• Self-reviewed my own diff

• No unnecessary console.log, debug code, or commented-out blocks

• npm run lint passes locally

• No TypeScript errors (pnpm run typecheck)

• Added or updated tests where applicable

• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly

• Color contrast meets WCAG AA standard

• Tested on responsive layouts

---

Additional Context

The existing test suite contains several pre-existing failing tests on the current main branch. Verification confirmed these failures are unrelated to this dashboard skeleton feature and were not introduced by this PR.

A Windows-specific EPERM symlink permission issue was encountered during standalone build output generation. No feature-related build errors were observed prior to that environment-specific step.

[github-actions]

GSSoC Label Checklist 🏷️

@Umbrella-io — 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

[Priyanshu-byte-coder]

CI is failing on this PR. Please fix the TypeScript/test errors before we can merge. Run npm run typecheck and npm test locally to reproduce.

[sureshsuriya]

Hi @Priyanshu-byte-coder,
All requested CI issues have been resolved. The PR now passes all required checks successfully.
When you have time, could you please review it?

[Priyanshu-byte-coder]

New UI/feature PRs are on hold during the code quality sprint — see discussion #2651. PRs for tests, refactoring, bug fixes, docs, and performance are welcome.

[Priyanshu-byte-coder]

New feature/UI PRs are on hold during the code-quality sprint — see discussion #2651. We'll revisit after the sprint; tests, refactors, and bug-fix PRs are the priority right now.

[sureshsuriya]

Hi @Priyanshu-byte-coder, I’ve cleaned up the PR, resolved the conflicts, and all checks are passing now. I’ll keep it ready for review after the code-quality sprint. 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!