Refactor to use hooks (#436)

components/custom/submit-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+import { LoaderIcon } from "@/components/custom/icons";
+
+import { Button } from "../ui/button";
+
+export function SubmitButton({ children }: { children: React.ReactNode }) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      type={pending ? "button" : "submit"}
+      aria-disabled={pending}
+      className="relative"
+    >
+      {children}
+      {pending && (
+        <span className="animate-spin absolute right-4">
+          <LoaderIcon />
+        </span>
+      )}
+      <span aria-live="polite" className="sr-only" role="status">
+        {pending ? "Loading" : "Submit form"}
+      </span>
+    </Button>
+  );
+}