Replace the New Service Saving… text button with the loading-aware Button primitive

[mikewheeleer]

Adopt the loading-aware Button on the New Service submit

Description

src/app/services/new/page.tsx renders a bespoke <button> that swaps its label to "Saving…" and toggles disabled while submitting, duplicating logic the shared Button (with its loading/aria-busy support) is meant to own. This issue swaps the inline button for the primitive so the busy state is announced to assistive tech and the markup is consistent with other forms.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Replace the inline submit <button> with Button using its loading prop bound to the page's loading state.
• Keep type="submit" so the form still submits, and preserve the disabled-while-saving behaviour.
• Do not change the validation or the router.push("/services") success path.
• Coordinate with the New Service TextField migration if both land; this issue only touches the submit control.

Suggested execution

• Fork the repo and create a branch
• git checkout -b enhancement/services-new-loading-button
• Implement changes
  • Write code in: src/app/services/new/page.tsx; reuse src/components/Button.tsx.
  • Write comprehensive tests in: extend/create src/app/services/new/page.test.tsx — assert the button is disabled and aria-busy during submit and re-enables after.
  • Add documentation: note the busy submit in README.md.
  • Validate the busy state is announced and clicks are blocked while loading.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: submit then error (button re-enables), double-click blocked, and success navigation.
• Include the npm test output.

Example commit message

feat(services): use the loading-aware Button on the New Service form

Guidelines

• Minimum 95 percent test coverage for the changed page.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[GBOYEE]

Hello! I can work on this. I'll implement the frontend changes with proper state management and clean UI patterns. PR incoming shortly.

[grantfox-oss]

🦊 GrantFox — @GBOYEE has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #151)
2. Your PR will be reviewed by the Agentpay-Org maintainers

Good luck! Track your progress on GrantFox.

[GBOYEE]

CI is blocked by broken imports on main (docs/page.tsx missing CurlBlock + resolveApiBase). PR #214 fixes this — once merged, this PR #212's CI will pass.