feat: add isLoading prop to Button component with spinner

[palak170306-design]

Summary

• Added isLoading?: boolean prop to the base <Button>
  component in components/ui/button.tsx
• When isLoading={true}, a Loader2 spinning icon from
  lucide-react renders next to the button text
• Button auto-disables when isLoading={true} to prevent
  double clicks during async operations
• Previously, loading states only used disabled prop with
  no visual feedback — this improves UX significantly

Type of change

• Bug fix
• New feature
• Refactor
• Documentation
• Test or CI improvement
• Starter template change

Related issue

Closes #302

Validation

• npm run lint
• npm test
• npm run build

List any additional manual verification you performed:

• Verified isLoading={true} renders spinning Loader2 icon
• Verified button is disabled when isLoading={true}
• Verified existing buttons with disabled prop still work unchanged

Screenshots or recordings

N/A — component-level change, no UI screenshots applicable

Checklist

• I kept this PR focused on one primary change
• I updated documentation if behavior changed
• I did not commit secrets, local logs, or scratch files
• I am requesting review on the correct scope

Summary by CodeRabbit

• New Features
  • Button now supports an animated loading state (off by default). When active it shows a spinner alongside the button label, preserves the button content, and automatically disables interaction while an action is in progress.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @palak170306-design!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 54c91b01-649b-4e8a-a920-1ff45f3e0a2e

📥 Commits

Reviewing files that changed from the base of the PR and between 1d1bd42 and 9cb1dc8.

📒 Files selected for processing (1)

• components/ui/button.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• components/ui/button.tsx

---

Walkthrough

The Button component now accepts an isLoading prop that displays a spinning loader icon and disables the button during async operations.

Changes

Button Loading State

Layer / File(s)	Summary
Import, props, and render updates components/ui/button.tsx	Adds Loader2 import; extends Button props with isLoading?: boolean (default false); when isLoading is true the component disables the underlying button and renders a spinning Loader2 next to children.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A rabbit taps the button slow,
Spinner twirls, a gentle glow.
While async paths weave soft and true,
I hum a hop to see it through. 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding an isLoading prop to the Button component with a spinner visual indicator.
Description check	✅ Passed	The PR description follows the template structure with all required sections completed: summary, type of change, related issue, validation, checklist, and screenshots sections.
Linked Issues check	✅ Passed	The code changes fully address issue #302 requirements: isLoading prop added, Loader2 spinner renders when isLoading is true, button auto-disables, and visual feedback replaces silent disabled state.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the isLoading prop feature; no unrelated modifications were introduced outside the stated objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/ui/button.tsx`:
- Around line 57-61: The disabled prop is currently being overridden because
{...props} is spread after disabled={isLoading || props.disabled}; fix by
computing a final disabled value (e.g., const finalDisabled = isLoading ||
props.disabled) or by spreading {...props} before other explicit props and then
setting disabled={finalDisabled} so isLoading always forces disabled; update the
JSX in the Comp element (the usage of Comp, isLoading, props, and disabled) to
ensure the explicit disabled value wins over any disabled passed in props.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5ef94108-8cff-4fc4-a248-e142b4428f4b

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and 1d1bd42.

📒 Files selected for processing (1)

• components/ui/button.tsx