chore: create

components/auth/AuthButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Button, CircularProgress } from "@nextui-org/react";
+import React from "react";
+import { useFormStatus } from "react-dom";
+
+export const AuthButton = ({ type }: { type: string }) => {
+  const { pending } = useFormStatus();
+  return (
+    <Button color="primary" type="submit" aria-disabled={pending}>
+      {pending ? (
+        <CircularProgress aria-label="Loading..." />
+      ) : type === "sign-in" ? (
+        "Log In"
+      ) : (
+        "Sign Up"
+      )}
+    </Button>
+  );
+};

components/auth/AuthForm.tsx

@@ -9,6 +9,7 @@ import { authenticate } from "@/actions";
 
 import { ProwlerExtended } from "../icons";
 import { ThemeSwitch } from "../ThemeSwitch";
+import { AuthButton } from "./AuthButton";
 
 export const AuthForm = ({ type }: { type: string }) => {
   const [isVisible, setIsVisible] = useState(false);
@@ -89,9 +90,7 @@ export const AuthForm = ({ type }: { type: string }) => {
               Forgot password?
             </Link>
           </div>
-          <Button color="primary" type="submit">
-            {type === "sign-in" ? "Log In" : "Sign Up"}
-          </Button>
+          <AuthButton type={type} />
         </form>
         {type === "sign-in" && (
           <>

components/auth/index.ts

@@ -1 +1,2 @@
+export * from "./AuthButton";
 export * from "./AuthForm";

components/providers/ButtonAddProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@nextui-org/react";
+import { Button, CircularProgress } from "@nextui-org/react";
 import React from "react";
 import { useFormStatus } from "react-dom";
 
@@ -8,7 +8,7 @@ export const ButtonAddProvider = () => {
   const { pending } = useFormStatus();
   return (
     <Button type="submit" area-disabled={pending}>
-      {pending ? "Adding..." : "Add provider"}
+      {pending ? <CircularProgress aria-label="Loading..." /> : "Add provider"}
     </Button>
   );
 };