diff --git a/src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx b/src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx index ad990afb..913687e9 100644 --- a/src/features/UserAccount/components/PagePersonalInfo/hooks/index.tsx +++ b/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() + const [loader, setLoader] = useState(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, + } } diff --git a/src/features/UserAccount/components/PagePersonalInfo/index.tsx b/src/features/UserAccount/components/PagePersonalInfo/index.tsx index 5cb106e5..86a6bb07 100644 --- a/src/features/UserAccount/components/PagePersonalInfo/index.tsx +++ b/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 ( - + ) } diff --git a/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx b/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx index 16d4d831..a56ec3c9 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/hooks/useUserInfo.tsx +++ b/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, diff --git a/src/features/UserAccount/components/PersonalInfoForm/index.tsx b/src/features/UserAccount/components/PersonalInfoForm/index.tsx index 7b5ed6f2..14ff3bb5 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/index.tsx +++ b/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)} /> - - - + {loader ? : ( + + + + )}