loaders, outSelectClose, notifications

src/components/Common/Loader/Loader.jsx

@@ -8,7 +8,7 @@ export const Loader = ({ width = 50, height = 50, style }) => {
     <div className="loader">
       <SVGLoader
         type="Circles"
-        color={style ? style : `#fff`}
+        color={style ? style : `green`}
         height={height}
         width={width}
       />

src/components/Common/Loader/loader.scss

@@ -5,7 +5,6 @@
   justify-content: center;
   align-items: center;
   position: relative;
-
   //&:hover {
   //  path {
   //    fill: #6aaf5c;

src/pages/Quiz/QuizPage.js

@@ -25,9 +25,11 @@ import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
 import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
 
 import "./quiz-page.scss";
+import { Loader } from "@components/Common/Loader/Loader";
 
 export const QuizPage = () => {
   const [questionnaires, setQuestionnaires] = useState([]);
+  const [loader, setLoader] = useState(false)
   const dispatch = useDispatch();
   const [personalInfoItems] = useState([
     {
@@ -102,8 +104,12 @@ export const QuizPage = () => {
   const [selectedCategory, setSetSelectedCategory] = useState(false);
 
   useEffect(() => {
+    setLoader(true)
     apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-      .then((res) => setQuestionnaires(res))
+      .then((res) => {
+        setQuestionnaires(res)
+        setLoader(false)
+      })
       .catch((e) => console.log(e));
   }, []);
 
@@ -122,7 +128,7 @@ export const QuizPage = () => {
         <div className="quiz-page__title main-title">
           {!selectedCategory ? "Тестирование" : "Замена специализации"}
         </div>
-        {!selectedCategory && (
+        {loader ? <Loader /> : (
           <>
             {/*<div className="quiz-page__specialization">*/}
             {/*  <SelectedCategory setSelectedCategory={setSetSelectedCategory} />*/}

src/pages/Quiz/QuizReportPage.js

@@ -13,6 +13,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 // import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
 import { AlertResult } from "@components/features/quiz/AlertResult";
 import { QuizReport } from "@components/features/quiz/QuizReport";
+import { Loader } from "@components/Common/Loader/Loader";
 
 export const QuizReportPage = () => {
   const test = useSelector(selectedTest);
@@ -23,15 +24,19 @@ export const QuizReportPage = () => {
     navigate("/Quiz");
   }
 
+  const [testInfo, setTestInfo] = useState({});
+  const [loader, setLoader] = useState(false)
+
   useEffect(() => {
+    setLoader(true)
     apiRequest(
       `/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`
     ).then((res) => {
       setTestInfo(res);
+      setLoader(false)
     });
   }, []);
 
-  const [testInfo, setTestInfo] = useState({});
 
   return (
     <div className="quiz-report-page">
@@ -46,13 +51,17 @@ export const QuizReportPage = () => {
             { name: "Отчет по тестированию", link: "/profile/quiz" }
           ]}
         />
-        <div className="quiz-report-page__title main-title">
-          Отчет по тестированию позиции {testInfo.questionnaire_title}
-        </div>
-        <div className="quiz-report-page__report-quiz">
-          <QuizReport info={testInfo} />
-        </div>
-        <AlertResult info={testInfo} />
+        {loader ? <Loader/> :
+          <>
+            <div className="quiz-report-page__title main-title">
+              Отчет по тестированию позиции {testInfo.questionnaire_title}
+            </div>
+            <div className="quiz-report-page__report-quiz">
+              <QuizReport info={testInfo} />
+            </div>
+            <AlertResult info={testInfo} />
+          </>
+        }
       </div>
       <Footer />
     </div>