Merge pull request #42 from MAKCKACHKA/loader

Loader

package.json

@@ -27,6 +27,7 @@
     "react-modal": "^3.16.1",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.15.0",
+    "react-spinners": "^0.13.8",
     "redux-persist": "^6.0.0",
     "styled-components": "^6.1.1",
     "vite-plugin-svgr": "^3.2.0",

src/components/Loader/Loader.jsx

@@ -0,0 +1,10 @@
+import { BeatLoader } from 'react-spinners';
+const override = {
+  display: 'flex',
+  margin: '30vh auto 100vh',
+  justifyContent: 'center',
+};
+
+export const Loader = () => {
+  return <BeatLoader cssOverride={override} color="#E3FFA8" size={9} />;
+};

src/components/MainComponents/RecommendedFood/RecommendedFood.jsx

@@ -1,13 +1,15 @@
 import StyledRecommendedFoodSection from './RecommendedFood.styled';
 import icons from '../../../assets/icons.svg';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectRecFood } from '../../../redux/selesctors';
+import { selectRecFood, selectIsLoading } 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 food = useSelector(selectRecFood);
   let reducedArr = [];
 
@@ -22,6 +24,7 @@ export default function RecommendedFoodPage() {
   return (
     <StyledRecommendedFoodSection>
       <h2>Recommended Food</h2>
+      {isLoading && <Loader />}
       <div className="wrapper">
         <ul>
           {reducedArr?.map(({ amount, calories, img, name, _id }) => {

src/components/SharedLayout/SharedLayout.jsx

@@ -3,14 +3,15 @@ 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 { setToken } from '../../redux/auth/auth';
 
 const SharedLayout = () => {
   return (
     <>
       <Header />
       <Container>
-        <Suspense fallback={null}>
+        <Suspense fallback={<Loader />}>
           <Outlet />
         </Suspense>
       </Container>

src/pages/RecommendedFoodPage/RecommendedFoodPage.jsx

@@ -2,12 +2,14 @@ import StyledRecommendedFoodPage from './RecommendedFoodPage.styled';
 import Illustration from '../../assets/pageIllustrations.svg';
 import { useDispatch } from 'react-redux';
 import { refreshRecommendedFood } from '../../redux/operations';
-import { selectRecFood } from '../../redux/selesctors';
+import { selectRecFood, selectIsLoading } 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 food = useSelector(selectRecFood);
   let reducedArr = [];
 
@@ -27,6 +29,7 @@ export default function RecommendedFoodPage() {
           <svg className="img_div">
             <use href={`${Illustration}#icon-recommented-food`} />
           </svg>
+          {isLoading && <Loader />}
           <ul>
             {reducedArr?.map(({ amount, calories, img, name, _id }) => {
               return (

src/redux/selesctors.js

@@ -2,11 +2,13 @@ export const selectToken = (state) => state.auth.token;
 
 export const selectUserStatistics = (state) => state.data.statistics;
 
+export const selectIsLoading = (state) => state.data.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;