replace disabled to pending

Author: irsyadadl

resources/js/pages/auth/confirm-password.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Form } from "@/components/ui/form"
 import { TextField } from "@/components/ui/text-field"
+import { Loader } from "@/components/ui/loader"
 
 export default function ConfirmPassword() {
   const { data, setData, post, processing, errors, reset } = useForm({
@@ -16,7 +17,7 @@ export default function ConfirmPassword() {
     }
   }, [])
 
-  const submit = (e: { preventDefault: () => void }) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
 
     post("/confirm-password")
@@ -43,7 +44,10 @@ export default function ConfirmPassword() {
         />
 
         <div className="mt-4 flex items-center justify-end">
-          <Button isDisabled={processing}>Confirm</Button>
+          <Button isPending={processing}>
+            {processing && <Loader />}
+            Confirm
+          </Button>
         </div>
       </Form>
     </>

resources/js/pages/auth/forgot-password.tsx

@@ -3,6 +3,7 @@ import { Head, useForm } from "@inertiajs/react"
 import { Button } from "@/components/ui/button"
 import { Form } from "@/components/ui/form"
 import { TextField } from "@/components/ui/text-field"
+import { Loader } from "@/components/ui/loader"
 
 interface ForgotPasswordProps {
   status: string
@@ -13,7 +14,7 @@ export default function ForgotPassword({ status }: ForgotPasswordProps) {
     email: "",
   })
 
-  const submit = (e: { preventDefault: () => void }) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
     post(route("password.email"))
   }
@@ -35,7 +36,8 @@ export default function ForgotPassword({ status }: ForgotPasswordProps) {
         />
 
         <div className="flex items-center justify-end">
-          <Button type="submit" className="w-full" isDisabled={processing}>
+          <Button type="submit" className="w-full" isPending={processing}>
+            {processing && <Loader />}
             Email Password Reset Link
           </Button>
         </div>

resources/js/pages/auth/login.tsx

@@ -7,6 +7,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { Form } from "@/components/ui/form"
 import { Link } from "@/components/ui/link"
 import { TextField } from "@/components/ui/text-field"
+import { Loader } from "@/components/ui/loader"
 
 interface LoginProps {
   status: string
@@ -27,7 +28,7 @@ export default function Login(args: LoginProps) {
     }
   }, [])
 
-  const submit = (e: { preventDefault: () => void }) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
 
     post("/login")
@@ -76,7 +77,8 @@ export default function Login(args: LoginProps) {
             </Link>
           )}
         </div>
-        <Button isDisabled={processing} type="submit">
+        <Button isPending={processing} type="submit">
+          {processing && <Loader />}
           Log in
         </Button>
         <div className="text-center">

resources/js/pages/auth/register.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Link } from "@/components/ui/link"
 import { TextField } from "@/components/ui/text-field"
 import { Form } from "@/components/ui/form"
+import { Loader } from "@/components/ui/loader"
 
 export default function Register() {
   const { data, setData, post, processing, errors, reset } = useForm({
@@ -22,7 +23,7 @@ export default function Register() {
     }
   }, [])
 
-  const submit = (e: React.FormEvent<HTMLFormElement>) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
 
     post("/register")
@@ -73,7 +74,8 @@ export default function Register() {
           errorMessage={errors.password_confirmation}
           isRequired
         />
-        <Button type="submit" className="w-full" isDisabled={processing}>
+        <Button type="submit" className="w-full" isPending={processing}>
+          {processing && <Loader />}
           Register
         </Button>
         <div className="text-center">

resources/js/pages/auth/reset-password.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { TextField } from "@/components/ui/text-field"
 import { Form } from "@/components/ui/form"
+import { Loader } from "@/components/ui/loader"
 
 interface ResetPasswordProps {
   token: string
@@ -25,7 +26,7 @@ export default function ResetPassword(args: ResetPasswordProps) {
     }
   }, [])
 
-  const submit = (e: React.FormEvent<HTMLFormElement>) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
     post(route("password.request"))
   }
@@ -70,7 +71,8 @@ export default function ResetPassword(args: ResetPasswordProps) {
         />
 
         <div className="mt-4 flex items-center justify-end">
-          <Button type="submit" className="ml-4" isDisabled={processing}>
+          <Button type="submit" className="ml-4" isPending={processing}>
+            {processing && <Loader />}
             Reset Password
           </Button>
         </div>

resources/js/pages/auth/verify-email.tsx

@@ -3,11 +3,13 @@ import { Head, useForm } from "@inertiajs/react"
 import { Button } from "@/components/ui/button"
 import { Form } from "@/components/ui/form"
 import { Link } from "@/components/ui/link"
+import { Loader } from "@/components/ui/loader"
+import type React from "react"
 
 export default function VerifyEmail({ status }: { status?: any }) {
   const { post, processing } = useForm()
 
-  const submit = (e: React.FormEvent<HTMLFormElement>) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
 
     post(route("verification.send"))
@@ -24,7 +26,8 @@ export default function VerifyEmail({ status }: { status?: any }) {
 
       <div className="mt-4 flex items-center justify-between">
         <Form onSubmit={submit}>
-          <Button isDisabled={processing} type="submit">
+          <Button isPending={processing} type="submit">
+            {processing && <Loader />}
             Resend Verification Email
           </Button>
         </Form>

resources/js/pages/settings/password.tsx

@@ -18,7 +18,7 @@ export default function Password() {
     password_confirmation: "",
   })
 
-  const submit = (e: React.FormEvent<HTMLFormElement>) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
     put(route("password.update"), {
       preserveScroll: true,

resources/js/pages/settings/profile.tsx

@@ -22,7 +22,7 @@ export default function Profile({ mustVerifyEmail, status }: Props) {
     email: auth.user.email ?? "",
   })
 
-  const submit = (e: React.FormEvent<HTMLFormElement>) => {
+  const submit = (e: React.FormEvent) => {
     e.preventDefault()
     patch("/settings/profile", {
       preserveScroll: true,