fix: add inline variant to Spinner to prevent button expansion

[sathwikhbhat]

Issue Resolved

Closes #173

Changes

• Added inline prop to Spinner component
• When inline={true}, renders a compact 5x5 spinner without padding wrapper
• Default behaviour (inline={false}) maintains original centred spinner with padding for full-page loading states
• Updated button loading state to use <Spinner inline /> variant

Why This Works

Buttons already have their own flex layout and padding. The original spinner's wrapper with py-10 (40px vertical padding) conflicted with button dimensions. The inline variant removes this wrapper, allowing the spinner to fit naturally within button content.

Testing

• Verified button maintains normal size with loading spinner
• Confirmed standalone spinner still works for full-page loading states

Types of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Enhancement (improvement to an existing feature)
• Breaking change (fix or feature that would cause existing functionality to change)
• Test (adds or updates tests only)
• Documentation (non-code change)

Checklist

• My code follows the code style of this project
• My change requires a change to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for paisable ready!

Name	Link
🔨 Latest commit	eebe07e
🔍 Latest deploy log	https://app.netlify.com/projects/paisable/deploys/68fba994615a520008eec609
😎 Deploy Preview	https://deploy-preview-174--paisable.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 92 Accessibility: 100 Best Practices: 100 SEO: 91 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull Request Overview

This PR fixes a button expansion issue caused by the Spinner component's padding by introducing an inline variant. The solution allows spinners to fit naturally within button content while preserving the original centered spinner for full-page loading states.

• Added inline prop to Spinner component with conditional rendering
• Updated button loading state in SetupPage to use the new inline variant

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/components/Spinner.jsx	Added inline prop with conditional rendering for compact 5x5 spinner variant
frontend/src/pages/SetupPage.jsx	Updated loading button to use inline spinner variant

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.