[GOOD FIRST ISSUE] Add loading spinner to Refresh button during data fetch

[Priyanshu-byte-coder]

What Needs to Be Done

When the user clicks "Refresh" on any dashboard card (e.g. CodingActivityInsightsCard, Activity feed), the button shows no loading state. Add a spinner icon to the button while the fetch is in progress, and disable the button to prevent double-clicks.

Why This Matters

Without a loading indicator, users don't know if their click registered. They may click multiple times causing unnecessary API requests.

Files to Look At

• src/components/CodingActivityInsightsCard.tsx — Refresh button at line ~248
• src/components/ — Other cards with Refresh buttons follow the same pattern

Acceptance Criteria

• Refresh button shows a spinning icon while loading === true
• Button is disabled during loading
• Returns to normal state after fetch completes (success or error)
• Uses existing Tailwind animate-spin class — no new dependency needed

Tech Context

The loading state already exists in each card component. Just pass it to the button:

<button disabled={loading}>
  {loading ? <Spinner className="animate-spin" /> : "Refresh"}
</button>

Use any existing icon from the project's icon library (Lucide is already installed).

Mentorship

Comment on this issue and you'll receive a welcome comment with onboarding steps. The maintainer will guide you through your first PR.

[ramlal-01]

Hey @Priyanshu-byte-coder 👋

I’d like to work on this issue.

From the description, it looks like the loading state is already available in the card components, so my approach would be to wire that state into the Refresh button, show a spinner using the existing icon setup/Tailwind animate-spin, and disable the button while the request is in progress to avoid duplicate fetches.

I’ll also check the other dashboard cards using the same refresh pattern so the behavior stays consistent across the UI.

Happy to open a PR for this.

[Swathy45]

Hi! I would love to work on this issue. Kindly assign it to me, thanks.

[tmdeveloper007]

Proposed Implementation Plan

Here is a detailed, technically solid, step-by-step approach to solve this issue:

1. In the dashboard card widgets (e.g., CodingActivityInsightsCard.tsx and others), locate the Refresh button rendering code.
2. Check the existing loading state from component state.
3. Update the button properties: set disabled={loading}, show a spinning Lucide icon (e.g. Loader2 or RefreshCw) with the animate-spin class when loading is true, and transition smoothly back to normal states once the fetch wraps.

I would love to work on this issue and implement the proposed solution. Could you please assign this issue to me? Thank you!

[srinidhi-2006-bit]

/assign

[srinidhi-2006-bit]

Hi @Priyanshu-byte-coder, I would like to work on #953 ([GOOD FIRST ISSUE] Add loading spinner to Refresh button during data fetch).

I have experience working with React/Next.js UI improvements and would like to contribute this enhancement under GSSoC'26. Could you please assign this issue to me?

[Smrithi-krishna]

Hi @Priyanshu-byte-coder 👋

I would like to work on this issue.

I understand the requirement to add a loading spinner and disabled state to dashboard refresh buttons while data fetching is in progress, using the existing loading state and Tailwind’s animate-spin utility.

Can I be assigned this issue?

[github-actions]

@Smrithi-krishna You already have 2 open issue(s) assigned. Complete those first before picking up more.

[patelnitya54]

/assign
I'd like to work on this — contributing under GSSoC'26