preLoader and validate report form

src/components/ProfileCalendar/ProfileCalendar.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
+import {currentMonth, getReports} from '../Calendar/calendarHelper'
 import { Link } from 'react-router-dom'
 import moment from "moment";
 
-import {currentMonth, getReports} from '../Calendar/calendarHelper'
 import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
-import { Footer } from '../Footer/Footer'
+import {Loader} from "../Loader/Loader";
 import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
+import { Footer } from '../Footer/Footer'
 
 import {useRequest} from "../../hooks/useRequest";
 import { getProfileInfo } from '../../redux/outstaffingSlice'
@@ -22,6 +23,7 @@ export const ProfileCalendar = () => {
     const [reports, setReports] = useState([]);
     const [totalHours, setTotalHours] = useState(0);
     const [requestDates, setRequestDates] = useState('');
+    const [loader, setLoader] = useState(false)
 
     const {apiRequest} = useRequest();
 
@@ -30,6 +32,7 @@ export const ProfileCalendar = () => {
     });
 
     useEffect(async () => {
+        setLoader(true)
         if (!requestDates) {
             return
         }
@@ -45,6 +48,7 @@ export const ProfileCalendar = () => {
                 }
                 setTotalHours(spendTime);
                 setReports(reports)
+                setLoader(false)
             })
     }, [requestDates]);
 
@@ -68,14 +72,18 @@ export const ProfileCalendar = () => {
                         }}>Заполнить отчет за день</button>
                     </Link>
                 </div>
-                <div className='row'>
-                    <div className='col-12 col-xl-12'>
-                        <ProfileCalendarComponent reportsDates={reports} />
-                        <p className='calendar__hours'>
-                            {month} : <span> {totalHours} часов </span>
-                        </p>
+                {loader ?
+                    <Loader height={80}  width={80} />
+                    :
+                    <div className='row'>
+                        <div className='col-12 col-xl-12'>
+                            <ProfileCalendarComponent reportsDates={reports} />
+                            <p className='calendar__hours'>
+                                {month} : <span> {totalHours} часов </span>
+                            </p>
+                        </div>
                     </div>
-                </div>
+                }
             </div>
             <Footer />
         </div>

src/components/ProfileCalendar/profileCalendar.scss

@@ -16,6 +16,15 @@
   .summary__info {
     padding-right: 25px;
   }
+
+  .loader {
+    margin: 20px 0 50px;
+    &:hover {
+      path {
+        fill: #ffffff;
+      }
+    }
+  }
   .profile__calendar {
     margin-top: 20px;
   }