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

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>