Style fix to loader and settings navigation fix

src/components/Loader/Loader.jsx

@@ -3,6 +3,10 @@ const override = {
   display: 'flex',
   margin: '30vh auto 100vh',
   justifyContent: 'center',
+  position: 'fixed',
+  top: '20%',
+  left: '50%',
+  transform: 'translate(-50%, -50%) scale(2)',
 };
 
 export const Loader = () => {

src/components/MainComponents/RecommendedFood/RecommendedFood.jsx

@@ -1,15 +1,19 @@
 import StyledRecommendedFoodSection from './RecommendedFood.styled';
 import icons from '../../../assets/icons.svg';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectRecFood, selectIsLoading } from '../../../redux/selesctors';
+import {
+  selectRecFood,
+  selectIsLoadAuth,
+  selectIsLoadData,
+} from '../../../redux/selesctors';
 import { useEffect } from 'react';
 import { refreshRecommendedFood } from '../../../redux/operations';
 import { NavLink } from 'react-router-dom';
 import { Loader } from '../../Loader/Loader';
 
 export default function RecommendedFoodPage() {
   const dispatch = useDispatch();
-  const isLoading = useSelector(selectIsLoading);
+  const isLoading = useSelector(selectIsLoadAuth && selectIsLoadData);
   const food = useSelector(selectRecFood);
   let reducedArr = [];
 

src/components/SharedLayout/SharedLayout.jsx

@@ -1,12 +1,16 @@
-import { Suspense } from 'react';
+import { Suspense, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { Header } from 'components/Header/Header';
 import { Container } from './SharedLayout.styled';
 import { Toaster } from 'react-hot-toast';
 import { Loader } from '../Loader/Loader';
+import { useSelector } from 'react-redux';
+import { selectIsLoadAuth, selectIsLoadData } from '../../redux/selesctors';
 // import { setToken } from '../../redux/auth/auth';
 
 const SharedLayout = () => {
+  const isLoadData = useSelector(selectIsLoadData);
+  const isLoadAuth = useSelector(selectIsLoadAuth);
   return (
     <>
       <Header />
@@ -16,6 +20,7 @@ const SharedLayout = () => {
         </Suspense>
       </Container>
       <Toaster reverseOrder={false} />
+      {isLoadData && isLoadAuth && <Loader />}
     </>
   );
 };

src/pages/RecommendedFoodPage/RecommendedFoodPage.jsx

@@ -2,14 +2,18 @@ import StyledRecommendedFoodPage from './RecommendedFoodPage.styled';
 import Illustration from '../../assets/pageIllustrations.svg';
 import { useDispatch } from 'react-redux';
 import { refreshRecommendedFood } from '../../redux/operations';
-import { selectRecFood, selectIsLoading } from '../../redux/selesctors';
+import {
+  selectRecFood,
+  selectIsLoadAuth,
+  selectIsLoadData,
+} from '../../redux/selesctors';
 import { useSelector } from 'react-redux';
 import { useEffect } from 'react';
 import { Loader } from '../../components/Loader/Loader';
 
 export default function RecommendedFoodPage() {
   const dispatch = useDispatch();
-  const isLoading = useSelector(selectIsLoading);
+  const isLoading = useSelector(selectIsLoadAuth && selectIsLoadData);
   const food = useSelector(selectRecFood);
   let reducedArr = [];
 

src/pages/SettingsPage/SettingsPage.jsx

@@ -35,8 +35,7 @@ import {
   getCurrentUser,
   updateUserInformation,
 } from '../../redux/operations';
-import { useState } from 'react';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function SettingsPage() {
   const { user } = useSelector(selectUserData);
@@ -76,13 +75,16 @@ export default function SettingsPage() {
       dispatch(getCurrentUser());
       setAvatar(user.avatarURL);
       avatar !== '' && typeof avatar === 'object' && setObjectURL(false);
+
+      window.location.href = '/healthy_hub/main ';
     }, 2300);
   };
 
   const handleCancel = (resetForm) => {
     resetForm({ values: initialValues });
     setAvatar(user ? user.avatarURL : '');
     setObjectURL(false);
+    window.location.href = '/healthy_hub/main ';
   };
 
   const validationSchema = Yup.object().shape({

src/redux/selesctors.js

@@ -2,13 +2,14 @@ export const selectToken = (state) => state.auth.token;
 
 export const selectUserStatistics = (state) => state.data.statistics;
 
-export const selectIsLoading = (state) => state.data.isLoading;
+export const selectIsLoadData = (state) => state.data.isLoading;
+export const selectIsLoadAuth = (state) => state.auth.isLoading;
 
 export const selectUserData = (state) => state.data.data;
 
 export const selectUserMeals = (state) => state.data.data.consumedMealsByDay;
 
 export const selectDailyNutrition = (state) =>
-    state.data.data.user.dailyNutrition;
+  state.data.data.user.dailyNutrition;
 
-export const selectRecFood = (state) => state.data.recommendedFood;
+export const selectRecFood = (state) => state.data.recommendedFood;