fix the loading state (#2177)

* fix the loading state * changes after review
PalisadoesFoundation · Aug 17, 2024 · c34c2c7 · c34c2c7
1 parent 0f78540
commit c34c2c7
Showing 1 changed file with 11 additions and 15 deletions.
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
@@ -26,7 +26,6 @@ import { GET_COMMUNITY_DATA, ORGANIZATION_LIST } from 'GraphQl/Queries/Queries';
 import { ReactComponent as PalisadoesLogo } from 'assets/svgs/palisadoes.svg';
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
-import Loader from 'components/Loader/Loader';
 import LoginPortalToggle from 'components/LoginPortalToggle/LoginPortalToggle';
 import { errorHandler } from 'utils/errorHandler';
 import useLocalStorage from 'utils/useLocalstorage';
@@ -63,7 +62,6 @@ const loginPage = (): JSX.Element => {
   const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
   const [showTab, setShowTab] = useState<'LOGIN' | 'REGISTER'>('LOGIN');
   const [role, setRole] = useState<'admin' | 'user'>('admin');
-  const [componentLoader, setComponentLoader] = useState(true);
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [signformState, setSignFormState] = useState({
     signfirstName: '',
@@ -113,22 +111,20 @@ const loginPage = (): JSX.Element => {
     if (isLoggedIn == 'TRUE') {
       navigate(getItem('userId') !== null ? '/user/organizations' : '/orglist');
     }
-    setComponentLoader(false);
   }, []);
 
   const togglePassword = (): void => setShowPassword(!showPassword);
   const toggleConfirmPassword = (): void =>
     setShowConfirmPassword(!showConfirmPassword);
 
-  const { data, loading, refetch } = useQuery(GET_COMMUNITY_DATA);
+  const { data, refetch } = useQuery(GET_COMMUNITY_DATA);
   useEffect(() => {
     // refetching the data if the pre-login data updates
     refetch();
   }, [data]);
   const [login, { loading: loginLoading }] = useMutation(LOGIN_MUTATION);
   const [signup, { loading: signinLoading }] = useMutation(SIGNUP_MUTATION);
-  const [recaptcha, { loading: recaptchaLoading }] =
-    useMutation(RECAPTCHA_MUTATION);
+  const [recaptcha] = useMutation(RECAPTCHA_MUTATION);
   const { data: orgData } = useQuery(ORGANIZATION_LIST);
 
   useEffect(() => {
@@ -336,15 +332,6 @@ const loginPage = (): JSX.Element => {
     }
   };
 
-  if (
-    componentLoader ||
-    loginLoading ||
-    signinLoading ||
-    recaptchaLoading ||
-    loading
-  ) {
-    return <Loader />;
-  }
   const socialIconsList = socialMediaLinks.map(({ href, logo, tag }, index) =>
     data?.getCommunityData ? (
       data.getCommunityData?.socialMediaUrls?.[tag] && (
@@ -435,6 +422,7 @@ const loginPage = (): JSX.Element => {
                   <div className="position-relative">
                     <Form.Control
                       type="email"
+                      disabled={loginLoading}
                       placeholder={tCommon('enterEmail')}
                       required
                       value={formState.email}
@@ -471,6 +459,7 @@ const loginPage = (): JSX.Element => {
                           password: e.target.value,
                         });
                       }}
+                      disabled={loginLoading}
                       autoComplete="current-password"
                     />
                     <Button
@@ -510,6 +499,7 @@ const loginPage = (): JSX.Element => {
                     <></>
                   )}
                   <Button
+                    disabled={loginLoading}
                     type="submit"
                     className="mt-3 mb-3 w-100"
                     value="Login"
@@ -550,6 +540,7 @@ const loginPage = (): JSX.Element => {
                       <div>
                         <Form.Label>{tCommon('firstName')}</Form.Label>
                         <Form.Control
+                          disabled={signinLoading}
                           type="text"
                           id="signfirstname"
                           className="mb-3"
@@ -569,6 +560,7 @@ const loginPage = (): JSX.Element => {
                       <div>
                         <Form.Label>{tCommon('lastName')}</Form.Label>
                         <Form.Control
+                          disabled={signinLoading}
                           type="text"
                           id="signlastname"
                           className="mb-3"
@@ -589,6 +581,7 @@ const loginPage = (): JSX.Element => {
                     <Form.Label>{tCommon('email')}</Form.Label>
                     <div className="position-relative">
                       <Form.Control
+                        disabled={signinLoading}
                         type="email"
                         data-testid="signInEmail"
                         className="mb-3"
@@ -616,6 +609,7 @@ const loginPage = (): JSX.Element => {
                     <Form.Label>{tCommon('password')}</Form.Label>
                     <div className="position-relative">
                       <Form.Control
+                        disabled={signinLoading}
                         type={showPassword ? 'text' : 'password'}
                         data-testid="passwordField"
                         placeholder={tCommon('password')}
@@ -770,6 +764,7 @@ const loginPage = (): JSX.Element => {
                     <Form.Label>{tCommon('confirmPassword')}</Form.Label>
                     <div className="position-relative">
                       <Form.Control
+                        disabled={signinLoading}
                         type={showConfirmPassword ? 'text' : 'password'}
                         placeholder={tCommon('confirmPassword')}
                         required
@@ -851,6 +846,7 @@ const loginPage = (): JSX.Element => {
                     className="mt-4 w-100 mb-3"
                     value="Register"
                     data-testid="registrationBtn"
+                    disabled={signinLoading}
                   >
                     {tCommon('register')}
                   </Button>