From 1cf9c42cf244926b1ac75a79a4fd27984f80d815 Mon Sep 17 00:00:00 2001
From: root <root@vmi3321457.contaboserver.net>
Date: Mon, 29 Jun 2026 11:33:50 +0200
Subject: [PATCH] feat(services): adopt loading-aware Button with aria-busy for
 New Service submit (#151)

- Add loading prop to shared Button component
- Set aria-busy when loading is true, removed on completion
- Pass loading={loading} from NewServicePage to Button
- Add test assertions for aria-busy state during submit
---
 src/app/services/new/page.test.tsx | 8 ++++++++
 src/app/services/new/page.tsx      | 1 +
 src/components/Button.tsx          | 3 +++
 3 files changed, 12 insertions(+)

diff --git a/src/app/services/new/page.test.tsx b/src/app/services/new/page.test.tsx
index c7b8729..51962a7 100644
--- a/src/app/services/new/page.test.tsx
+++ b/src/app/services/new/page.test.tsx
@@ -197,11 +197,19 @@ describe("NewServicePage", () => {
     expect(submitButton).toBeDisabled();
     expect(submitButton).toHaveTextContent("Saving…");
 
+    // Button should have aria-busy while loading
+    expect(submitButton).toHaveAttribute("aria-busy", "true");
+
     // Resolve post request
     resolvePost({});
 
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith("/services");
     });
+
+    // aria-busy should be removed after submission
+    await waitFor(() => {
+      expect(submitButton).not.toHaveAttribute("aria-busy");
+    });
   });
 });
diff --git a/src/app/services/new/page.tsx b/src/app/services/new/page.tsx
index b9ea5e8..af7fafd 100644
--- a/src/app/services/new/page.tsx
+++ b/src/app/services/new/page.tsx
@@ -64,6 +64,7 @@ export default function NewServicePage() {
 
         <Button
           type="submit"
+          loading={loading}
           disabled={loading}
           className="self-start"
         >
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8cdcc8a..ebb85c4 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -16,16 +16,19 @@ const ring =
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: Variant;
+  loading?: boolean;
 };
 
 export function Button({
   variant = "primary",
+  loading = false,
   className = "",
   ...rest
 }: ButtonProps) {
   return (
     <button
       {...rest}
+      aria-busy={loading || undefined}
       className={`rounded-full px-5 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed ${variants[variant]} ${ring} ${className}`}
     />
   );