Skip to content

feat(dashboard): add loading skeletons for widgets#2953

Closed
byteAbhi wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
byteAbhi:feature/dashboard-skeletons-v2
Closed

feat(dashboard): add loading skeletons for widgets#2953
byteAbhi wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
byteAbhi:feature/dashboard-skeletons-v2

Conversation

@byteAbhi

Copy link
Copy Markdown

Summary

Adds loading skeleton states for dashboard widgets to improve perceived performance and reduce layout shifts while dashboard data is loading.

Closes #1774


Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that changes existing behavior)
  • 📝 Documentation update
  • ♻️ Refactor / code cleanup (no functional change)
  • ⚡ Performance improvement
  • 🔒 Security fix
  • 🧪 Tests only

What Changed

  • Added loading skeleton UI for ContributionGraph.tsx
  • Added skeleton states for PRMetrics.tsx, TopRepos.tsx, StreakTracker.tsx, and GoalTracker.tsx
  • Improved dashboard loading UX by reducing layout shifts and visual flicker

How to Test

  1. Start the application locally using pnpm dev
  2. Open the dashboard page and throttle network speed (optional: Slow 3G in browser dev tools)
  3. Refresh the page and observe skeleton loaders before actual data loads

Expected result:

Dashboard widgets should display skeleton placeholders during loading and smoothly transition to actual content once data is fetched.


Screenshots / Recordings

| Before
Screenshot 2026-06-21 220105
| After
Screenshot 2026-06-21 220639


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 (npm run type-check)
  • 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
  • ARIA labels / roles added where needed
  • Tested on mobile / responsive layout

Additional Context

This PR was recreated from a clean branch based on the latest upstream main because the previous branch accumulated merge conflicts during rebase. The functionality remains unchanged.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) and removed gssoc26 GSSoC 2026 contribution labels Jun 30, 2026
@github-actions

Copy link
Copy Markdown

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

@byteAbhi

Copy link
Copy Markdown
Author

Recreated this PR from a clean branch based on latest upstream/main because the previous branch accumulated heavy merge conflicts during rebase. This PR contains the same feature changes with clean commit history.

@Priyanshu-byte-coder

Copy link
Copy Markdown
Owner

Hi — new UI components/features are currently on hold while we focus on code quality (see discussion #2651). Loading skeletons are a nice addition, but please hold this until the quality sprint wraps up. PRs for tests, refactoring, bug fixes, and docs are welcome in the meantime.

@Priyanshu-byte-coder

Copy link
Copy Markdown
Owner

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

@Priyanshu-byte-coder

Copy link
Copy Markdown
Owner

Unified widget skeletons just landed via #2639 (shared WidgetSkeleton + SkeletonBlock), which covers this. Closing — thanks for the work here, and please build on the new shared component for any remaining widgets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Add loading skeletons to all dashboard widgets

2 participants