From 8cddc8203173038db968e9887c922f145d5dd828 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 11 Mar 2025 06:00:49 +0800
Subject: [PATCH] fix: add loading state to buttons in forms and update button
 styles

---
 app/components/ui/button.tsx           | 25 ++++++++++++++++---------
 app/layouts/news/form-login.tsx        |  6 ++----
 app/layouts/news/form-register.tsx     |  6 ++----
 app/layouts/news/form-subscription.tsx |  6 ++----
 app/layouts/news/header-top.tsx        |  4 +++-
 5 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 5356358..798fa4f 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -1,4 +1,5 @@
 import { Button as HeadlessButton } from '@headlessui/react'
+import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -38,6 +39,7 @@ type ButtonBaseProperties = {
   variant?: VariantProps<typeof buttonVariants>['variant']
   size?: VariantProps<typeof buttonVariants>['size']
   className?: string
+  isLoading?: boolean
 }
 
 type PolymorphicReference<C extends ElementType> =
@@ -48,22 +50,27 @@ type ButtonProperties<C extends ElementType> = ButtonBaseProperties & {
   ref?: PolymorphicReference<C>
 } & Omit<ComponentPropsWithoutRef<C>, keyof ButtonBaseProperties>
 
-export const Button = <C extends ElementType = 'button'>({
-  as,
-  children,
-  variant,
-  size,
-  className,
-  ...properties
-}: ButtonProperties<C>) => {
+export const Button = <C extends ElementType = 'button'>(
+  properties: ButtonProperties<C>,
+) => {
+  const {
+    as,
+    children,
+    variant,
+    size,
+    className,
+    isLoading = false,
+    ...restProperties
+  } = properties
   const Component = as || HeadlessButton
   const classes = twMerge(buttonVariants({ variant, size, className }))
 
   return (
     <Component
       className={classes}
-      {...properties}
+      {...restProperties}
     >
+      {isLoading && <ArrowPathIcon className="animate-spin" />}
       {children}
     </Component>
   )
diff --git a/app/layouts/news/form-login.tsx b/app/layouts/news/form-login.tsx
index bd31a6b..131d249 100644
--- a/app/layouts/news/form-login.tsx
+++ b/app/layouts/news/form-login.tsx
@@ -24,7 +24,6 @@ export const FormLogin = () => {
   } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const formMethods = useRemixForm<TLoginSchema>({
     mode: 'onSubmit',
@@ -37,11 +36,9 @@ export const FormLogin = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
-    setDisabled(true)
     setError(undefined)
     setIsLoginOpen(false)
 
@@ -95,7 +92,8 @@ export const FormLogin = () => {
             </div>
 
             <Button
-              disabled={disabled}
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
               type="submit"
               className="w-full rounded-md py-2"
             >
diff --git a/app/layouts/news/form-register.tsx b/app/layouts/news/form-register.tsx
index 15470b6..ad22dab 100644
--- a/app/layouts/news/form-register.tsx
+++ b/app/layouts/news/form-register.tsx
@@ -40,7 +40,6 @@ export const FormRegister = () => {
   const { setIsLoginOpen, setIsRegisterOpen, setIsSuccessOpen } =
     useNewsContext()
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscriptionsData: subscriptions } = loaderData || {}
@@ -56,11 +55,9 @@ export const FormRegister = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
-    setDisabled(true)
     setError(undefined)
     setIsRegisterOpen(false)
     setIsSuccessOpen('register')
@@ -120,7 +117,8 @@ export const FormRegister = () => {
             )}
 
             <Button
-              disabled={disabled}
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
               type="submit"
               className="w-full rounded-md py-2"
             >
diff --git a/app/layouts/news/form-subscription.tsx b/app/layouts/news/form-subscription.tsx
index 7ea083f..6905100 100644
--- a/app/layouts/news/form-subscription.tsx
+++ b/app/layouts/news/form-subscription.tsx
@@ -29,7 +29,6 @@ export default function FormSubscription() {
   const { setIsSubscribeOpen, setIsSuccessOpen } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscriptionsData: subscriptions } = loaderData || {}
 
@@ -44,11 +43,9 @@ export default function FormSubscription() {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
-    setDisabled(true)
     setError(undefined)
     setIsSubscribeOpen(false)
     setIsSuccessOpen('payment')
@@ -77,7 +74,8 @@ export default function FormSubscription() {
           )}
 
           <Button
-            disabled={disabled}
+            isLoading={fetcher.state !== 'idle'}
+            disabled={fetcher.state !== 'idle'}
             type="submit"
             className="mt-5 w-full rounded-md py-2"
           >
diff --git a/app/layouts/news/header-top.tsx b/app/layouts/news/header-top.tsx
index ba87ae7..434a815 100644
--- a/app/layouts/news/header-top.tsx
+++ b/app/layouts/news/header-top.tsx
@@ -34,8 +34,10 @@ export const HeaderTop = () => {
           >
             <Button
               variant="newsSecondary"
-              className="hidden sm:block"
+              className="hidden sm:flex"
               type="submit"
+              disabled={fetcher.state !== 'idle'}
+              isLoading={fetcher.state !== 'idle'}
             >
               Logout
             </Button>