fix: add loading state to buttons in forms and update button styles

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'>({
+export const Button = <C extends ElementType = 'button'>(
-  as,
+  properties: ButtonProperties<C>,
-  children,
+) => {
-  variant,
+  const {
-  size,
+    as,
-  className,
+    children,
-  ...properties
+    variant,
-}: ButtonProperties<C>) => {
+    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>
   )

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"
             >

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"
             >

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"
           >

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>