🧩 Feature Request: Loading Skeletons for Dashboard Widgets
Problem
Currently, when the dashboard loads or fetches data, widgets either appear blank
or show incomplete states. This creates a jarring experience — especially on
slower connections — where users see empty cards with no indication that content
is loading.
Proposed Solution
Add Tailwind CSS-based shimmer skeleton components for each dashboard widget:
ContributionGraph.tsx — skeleton bar chart (several animated rect bars)PRMetrics.tsx — skeleton stat grid (4 placeholder boxes)StreakTracker.tsx — skeleton streak numbersTopRepos.tsx — skeleton list rows (3–5 placeholder items)GoalTracker.tsx — skeleton progress bars
Each widget should show the skeleton while its data fetch is in-flight,
then swap to real content once resolved.
Implementation Approach
Use Tailwind's built-in animate-pulse utility with bg-muted colored divs
that mirror the shape of the real content:
// Example skeleton for a stat card
<div className="animate-pulse space-y-2">
<div className="h-4 w-24 rounded bg-muted" />
<div className="h-8 w-16 rounded bg-muted" />
</div>
Each component already receives data as props from a parent fetch —
the skeleton should render when a isLoading prop is true.
Acceptance Criteria
Difficulty
level: beginner — Pure UI work, no API changes needed. Great for getting
familiar with the component structure.
I'd like to work on this issue under GSSoC 2026. Please assign it to me!
🧩 Feature Request: Loading Skeletons for Dashboard Widgets
Problem
Currently, when the dashboard loads or fetches data, widgets either appear blank
or show incomplete states. This creates a jarring experience — especially on
slower connections — where users see empty cards with no indication that content
is loading.
Proposed Solution
Add Tailwind CSS-based shimmer skeleton components for each dashboard widget:
ContributionGraph.tsx— skeleton bar chart (several animated rect bars)PRMetrics.tsx— skeleton stat grid (4 placeholder boxes)StreakTracker.tsx— skeleton streak numbersTopRepos.tsx— skeleton list rows (3–5 placeholder items)GoalTracker.tsx— skeleton progress barsEach widget should show the skeleton while its data fetch is in-flight,
then swap to real content once resolved.
Implementation Approach
Use Tailwind's built-in
animate-pulseutility withbg-mutedcolored divsthat mirror the shape of the real content:
Each component already receives data as props from a parent fetch —
the skeleton should render when a
isLoadingprop istrue.Acceptance Criteria
bg-muted)animate-pulseonlyDifficulty
level: beginner— Pure UI work, no API changes needed. Great for gettingfamiliar with the component structure.