@@ -46,8 +46,8 @@ export const Layout: React.FC = ({ children, titlePage, isLoader, h } async function getUserData(access: string) { - await dispatch(getUserBalance(access)) await dispatch(getAllInfo(access)) + await dispatch(getUserBalance(access)) dispatch(change(false)) } @@ -74,11 +74,13 @@ export const Layout: React.FC = ({ children, titlePage, isLoader, h if (lastAccessTokenRef.current !== data.access || (!hasLoadedUserDataRef.current && meStatus === 'idle')) { lastAccessTokenRef.current = data.access hasLoadedUserDataRef.current = false + // Устанавливаем userLoading в true перед началом загрузки + dispatch(change(true)) getUserData(data.access).then(() => { hasLoadedUserDataRef.current = true }) } - }, [data?.access, meStatus]) + }, [data?.access, meStatus, dispatch]) const [requestDelay, setRequestDelay] = useState(false) @@ -88,7 +90,8 @@ export const Layout: React.FC = ({ children, titlePage, isLoader, h setTimeout(() => setRequestDelay(true), 5000) }, []) - if (userLoading || isLoader || status === 'loading') { + const isUserLoading = (meStatus === 'pending' || (meStatus === 'idle' && data?.access)) && !hasLoadedUserDataRef.current + if (userLoading || isLoader || status === 'loading' || isUserLoading) { return ( = ({ device }) => { const { status, data } = useSession() + const meStatus = useAppSelector((state) => state.user.status) const [isChangeWindow, setIsChangeWindow] = useState(false) const [loading, setLoading] = useState(false) - if (status === 'loading' || loading) { + // Ждем загрузки сессии и данных пользователя + if (status === 'loading' || loading || meStatus !== 'succeeded') { return } @@ -52,23 +54,35 @@ export const Subscription: React.FC = ({ device }) => { export const Payment: React.FC = ({ device, changeClose }) => { const desktop = device === 'desktop' - const [offers, setOffers] = useState([]) + const [offers, setOffers] = useState(null) + const [loadingOffers, setLoadingOffers] = useState(false) - const [selectedOffer, setSelectedOffer] = useState(offers?.length ? offers[0].uid : '') + const [selectedOffer, setSelectedOffer] = useState('') const { data } = useSession() + const meStatus = useAppSelector((state) => state.user.status) const [messages, setMessages] = useState(null) + // Загружаем данные только после того, как данные пользователя загружены useEffect(() => { - if (data?.access) { + if (data?.access && meStatus === 'succeeded') { getPaymentsHistory(data.access).then((res) => setMessages(res)) } - }, [data?.access]) + }, [data?.access, meStatus]) useEffect(() => { - if (data?.access) accountApi.getPaymentsPlans(data?.access).then((res) => setOffers(res)) - }, [data?.access]) + if (data?.access && meStatus === 'succeeded') { + setLoadingOffers(true) + accountApi.getPaymentsPlans(data?.access).then((res) => { + setOffers(res) + if (res && res.length > 0) { + setSelectedOffer(res[0].uid) + } + setLoadingOffers(false) + }) + } + }, [data?.access, meStatus]) const pay = async (uid: string) => { const urlForPay = await accountApi.payProduct(data!.access, uid) @@ -76,6 +90,11 @@ export const Payment: React.FC = ({ device, changeClose }) urlForPay ? await Router.push(urlForPay) : null } + // Показываем лоадер пока загружаются offers + if (loadingOffers || offers === null) { + return + } + return ( @@ -194,6 +213,6 @@ var info = [ }, { title: 'Где проверять баланс токенов? Как следить за расходами?\n', - text: 'Траты по всем категориям и текущий баланс можно проверять в разделе «‎Дашборд».', + text: 'Траты по всем категориям и текущий баланс можно проверять в разделе «Дашборд».', }, ]