fix: replace disabled state with loading state for buttons in upload and category forms

app/layouts/admin/form-upload.tsx

@@ -1,10 +1,11 @@
-import { Button, Input } from '@headlessui/react'
+import { Input } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState, type ChangeEvent } from 'react'
 import { useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import { Button } from '~/components/ui/button'
 import { uploadCategorySchema, useAdminContext } from '~/contexts/admin'
 
 export const uploadSchema = z.object({
@@ -17,7 +18,6 @@ export type TUploadSchema = z.infer<typeof uploadSchema>
 export const FormUpload = () => {
   const { isUploadOpen, setUploadedFile } = useAdminContext()
   const fetcher = useFetcher()
-  const [disabled, setDisabled] = useState(false)
   const [error, setError] = useState<string>()
   const maxFileSize = 10 * 1024 // 10MB
 
@@ -32,13 +32,11 @@ export const FormUpload = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
     setUploadedFile(fetcher.data.uploadData.data.file_url)
 
-    setDisabled(true)
     setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
@@ -110,9 +108,10 @@ export const FormUpload = () => {
           {...register('category')}
         />
         <Button
-          disabled={disabled}
+          disabled={fetcher.state !== 'idle'}
+          isLoading={fetcher.state !== 'idle'}
           type="submit"
-          className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+          className="w-full rounded-md py-2"
         >
           Upload
         </Button>