Ott 1575 add arrow loader (#503)

* fix(#1575): add arrowloader for personal info form

* feat(#1575): add arrow loader

* fix(#1575): delete env

src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx

@@ -63,6 +63,7 @@ const transformToFormState = async (userInfo: UserInfo) => {
 export const useUserInfo = () => {
   const { changeLang, lang } = useLexicsStore()
   const [userInfo, setUserInfo] = useState<FormState>()
+  const [loader, setLoader] = useState<boolean>(false)
 
   const fetchUserInfo = useCallback(() => {
     getUserInfo()
@@ -71,12 +72,13 @@ export const useUserInfo = () => {
   }, [])
 
   const onSubmit = useCallback((data: SaveWithLang) => {
+    setLoader(true)
     saveUserInfo(data).then(() => {
       fetchUserInfo()
       if (data.language) {
         changeLang(data.language as Languages)
       }
-    })
+    }).finally(() => setLoader(false))
   }, [fetchUserInfo, changeLang])
 
   useEffect(() => {
@@ -90,5 +92,9 @@ export const useUserInfo = () => {
     }
     : null), [userInfo, lang])
 
-  return { onSubmit, userInfo: user }
+  return {
+    loader,
+    onSubmit,
+    userInfo: user,
+  }
 }

src/features/UserAccount/components/PagePersonalInfo/index.tsx

@@ -4,11 +4,15 @@ import { useUserInfo } from './hooks'
 import { PersonalInfoForm } from '../PersonalInfoForm'
 
 export const PagePersonalInfo = () => {
-  const { onSubmit, userInfo } = useUserInfo()
+  const {
+    loader,
+    onSubmit,
+    userInfo,
+  } = useUserInfo()
   if (!userInfo) return null
   return (
     <FormStore initialState={userInfo}>
-      <PersonalInfoForm onSubmit={onSubmit} />
+      <PersonalInfoForm onSubmit={onSubmit} loader={loader} />
     </FormStore>
   )
 }

src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx

@@ -14,10 +14,11 @@ import { Lang, langOptions } from '../config'
 import type { SaveWithLang } from '../../PagePersonalInfo/hooks'
 
 export type Props = {
+  loader?: boolean,
   onSubmit: (data: SaveWithLang) => void,
 }
 
-export const useUserInfo = ({ onSubmit }: Props) => {
+export const useUserInfo = ({ loader, onSubmit }: Props) => {
   const {
     hasChanges,
     readFormError,
@@ -97,6 +98,7 @@ export const useUserInfo = ({ onSubmit }: Props) => {
     handleSubmit,
     hasChanges,
     lang: selectedlangOption,
+    loader,
     onCountryBlur,
     onCountrySelect,
     onLangSelect,

src/features/UserAccount/components/PersonalInfoForm/index.tsx

@@ -5,6 +5,7 @@ import { Combobox } from 'features/Combobox'
 import { Input } from 'features/Common'
 import { T9n } from 'features/T9n'
 import { Error } from 'features/Common/Input/styled'
+import { ArrowLoader } from 'features/ArrowLoader'
 
 import type { Props } from './hooks/useUserInfo'
 import { useUserInfo } from './hooks/useUserInfo'
@@ -39,6 +40,7 @@ export const PersonalInfoForm = (props: Props) => {
     handleSubmit,
     hasChanges,
     lang,
+    loader,
     onCountryBlur,
     onCountrySelect,
     onLangSelect,
@@ -137,13 +139,15 @@ export const PersonalInfoForm = (props: Props) => {
         onChange={updateFormValue(newPassword2)}
       />
       <ButtonWrapper>
-        <SolidButton
-          disabled={!hasChanges()}
-          type='button'
-          onClick={handleSubmit}
-        >
-          <T9n t='save_changes' />
-        </SolidButton>
+        {loader ? <ArrowLoader disabled width='204px' /> : (
+          <SolidButton
+            disabled={!hasChanges()}
+            type='button'
+            onClick={handleSubmit}
+          >
+            <T9n t='save_changes' />
+          </SolidButton>
+        )}
         <Error t={readFormError(formError) || ''} />
       </ButtonWrapper>
       <PrivacyPolicyLink