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

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