fix: Use LoadingButtons instead of whole loader when possible

Author: Zenoo

client/src/components/forms/UserForm.tsx

@@ -9,7 +9,6 @@ import UserRoutes from '../../api/UserRoutes';
 import { useAlert } from '../../hooks/useAlert';
 import { useAuth } from '../../hooks/useAuth';
 import useForm from '../../hooks/useForm';
-import { useLoader } from '../../hooks/useLoader';
 import catchError from '../../utils/catchError';
 
 interface Data {
@@ -32,12 +31,12 @@ interface Props {
  */
 const UserForm = ({ data }: Props) => {
   const Alert = useAlert();
-  const Loader = useLoader();
   const { t } = useTranslation('user');
   const navigate = useNavigate();
   const { user, updateData } = useAuth();
 
-  const { register, handleSubmit, formState: { isSubmitting }, reset } = useForm<Data>('user', {
+  const [loading, setLoading] = React.useState(false);
+  const { register, handleSubmit, reset } = useForm<Data>('user', {
     defaultValues: data,
   });
 
@@ -57,7 +56,7 @@ const UserForm = ({ data }: Props) => {
       phone: formData.phone,
     };
 
-    Loader.open();
+    setLoading(true);
     if (formData.id) { // Edition
       if (formData.password.length) {
         await UserRoutes.changePassword(formData.id, formData.password);
@@ -83,7 +82,7 @@ const UserForm = ({ data }: Props) => {
 
         Alert.open('success', t('common:saved'));
       }).catch(catchError(Alert));
-      Loader.close();
+      setLoading(false);
     } else { // Addition
       await UserRoutes.insert({
         ...processedData,
@@ -97,7 +96,7 @@ const UserForm = ({ data }: Props) => {
         navigate('/app/admin/user/list');
         reset();
       }).catch(catchError(Alert));
-      Loader.close();
+      setLoading(false);
     }
   };
 
@@ -147,7 +146,7 @@ const UserForm = ({ data }: Props) => {
       >
         <LoadingButton
           color="primary"
-          loading={isSubmitting}
+          loading={loading}
           type="submit"
           variant="contained"
         >

client/src/views/account/AccountView/ProfileDetails.tsx

@@ -9,7 +9,6 @@ import UserRoutes, { UserWithPerson } from '../../../api/UserRoutes';
 import { useAlert } from '../../../hooks/useAlert';
 import { useAuth } from '../../../hooks/useAuth';
 import useForm from '../../../hooks/useForm';
-import { useLoader } from '../../../hooks/useLoader';
 import catchError from '../../../utils/catchError';
 
 type FormData = {
@@ -25,10 +24,10 @@ type FormData = {
 const ProfileDetails = ({ ...rest }) => {
   const auth = useAuth();
   const Alert = useAlert();
-  const Loader = useLoader();
   const { t } = useTranslation('user');
 
-  const { register, handleSubmit, formState: { isSubmitting }, control } = useForm<FormData>('user', {
+  const [loading, setLoading] = React.useState(false);
+  const { register, handleSubmit, control } = useForm<FormData>('user', {
     defaultValues: {
       firstName: auth.user.person.firstName,
       lastName: auth.user.person.lastName,
@@ -55,20 +54,20 @@ const ProfileDetails = ({ ...rest }) => {
 
     if (data.password) {
       if (data.passwordConfirm) {
-        Loader.open();
+        setLoading(true);
         await UserRoutes.changePassword(auth.user.id, data.password).catch(catchError(Alert));
       }
     }
 
-    Loader.open();
+    setLoading(true);
     await UserRoutes.update(auth.user.id, {
       lang: data.lang,
       person: { update: processedData }
     }, { person: true }).then((newData) => {
       auth.updateData(newData as UserWithPerson);
       Alert.open('success', t('common:saved'));
     }).catch(catchError(Alert));
-    Loader.close();
+    setLoading(false);
   };
 
   return (
@@ -122,7 +121,7 @@ const ProfileDetails = ({ ...rest }) => {
         >
           <LoadingButton
             color="primary"
-            loading={isSubmitting}
+            loading={loading}
             type="submit"
             variant="contained"
           >

client/src/views/auth/LoginView.tsx

@@ -11,7 +11,6 @@ import Text from '../../components/Text';
 import { useAlert } from '../../hooks/useAlert';
 import { useAuth } from '../../hooks/useAuth';
 import useForm from '../../hooks/useForm';
-import { useLoader } from '../../hooks/useLoader';
 import catchError from '../../utils/catchError';
 import { ErrorType } from '../../utils/fetcher';
 
@@ -28,23 +27,24 @@ const LoginView = () => {
   const navigate = useNavigate();
   const auth = useAuth();
   const Alert = useAlert();
-  const Loader = useLoader();
   const { t } = useTranslation('login');
 
-  const { register, handleSubmit, formState: { isSubmitting }, control, setValue, setFocus } = useForm<FormData>('user');
+  const [loading, setLoading] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false);
+  const { register, handleSubmit, control, setValue, setFocus } = useForm<FormData>('user');
   const login = useWatch({ name: 'login', control });
 
   /**
    * Login handler
    */
   const onSubmit = (formData: FormData) => {
-    Loader.open();
+    setLoading(true);
     auth.signin(formData.login, formData.password).then(() => {
-      Loader.close();
+      setLoading(false);
       navigate('/app/home', { replace: true });
     }).catch((response: string) => {
       catchError(Alert)(response);
-      Loader.close();
+      setLoading(false);
     });
   };
 
@@ -53,40 +53,39 @@ const LoginView = () => {
     const user = localStorage.getItem('user');
     const token = localStorage.getItem('token') || '';
     if (!auth.authed && user) {
-      Loader.open();
+      setLoading(true);
       auth.signin(user, token).catch((error: ErrorType) => {
         localStorage.removeItem('user');
         localStorage.removeItem('token');
         navigate('/login', { replace: true });
         catchError(Alert)(error);
       }).finally(() => {
-        Loader.close();
+        setLoading(false);
       });
     }
     if (auth.authed) {
       navigate('/app/home', { replace: true });
     }
-  }, [Alert, Loader, auth, navigate, t]);
+  }, [Alert, auth, navigate, t]);
 
   // Password reset
   const resetPassword = useCallback(async () => {
     if (!login) {
       Alert.open('error', t('pleaseEnterLogin'));
       return;
     }
-    Loader.open();
+    setLoading(true);
     await UserRoutes.sendPasswordResetMail(login).then(() => {
       Alert.open('success', t('passwordResetMailSent'));
     }).catch(catchError(Alert));
-    Loader.close();
-  }, [Alert, Loader, login, t]);
+    setLoading(false);
+  }, [Alert, login, t]);
 
   // Password reset form
   const [resetDialogOpen, setResetDialogOpen] = useState(false);
   const {
     register: resetRegister,
     handleSubmit: resetHandleSubmit,
-    formState: { isSubmitting: resetIsSubmitting },
     control: resetControl,
     reset: resetForm,
   } = useForm<ResetFormData>('user');
@@ -104,9 +103,11 @@ const LoginView = () => {
     const url = new URL(window.location.href);
     const code = url.searchParams.get('reset');
 
+    setResetLoading(true);
     UserRoutes.resetPassword(login, code || '', formData.password).then(() => {
       Alert.open('success', t('passwordResetSuccess'));
     }).catch(catchError(Alert)).finally(() => {
+      setResetLoading(false);
       setResetDialogOpen(false);
       resetForm();
     });
@@ -175,7 +176,7 @@ const LoginView = () => {
             <Box my={2}>
               <LoadingButton
                 color="primary"
-                loading={isSubmitting}
+                loading={loading}
                 fullWidth
                 size="large"
                 type="submit"
@@ -210,7 +211,7 @@ const LoginView = () => {
             <Button onClick={closeResetDialog}>{t('common:cancel')}</Button>
             <LoadingButton
               color="primary"
-              loading={resetIsSubmitting}
+              loading={resetLoading}
               type="submit"
               variant="contained"
             >