button loaders

src/components/Description/Description.js

@@ -7,8 +7,9 @@ import { LEVELS, SKILLS } from '../constants/constants';
 import { selectProfiles, selectFilteredCandidates, selectItems } from '../../redux/outstaffingSlice';
 import { useSelector } from 'react-redux';
 import { fetchProfile } from '../../server/server';
+import { Loader } from '../Loader/Loader';
 
-const Description = ({ onLoadMore }) => {
+const Description = ({ onLoadMore, isLoadingMore }) => {
   const candidatesListArr = useSelector(selectProfiles);
   const itemsArr = useSelector(selectItems);
   const filteredListArr = useSelector(selectFilteredCandidates);
@@ -65,7 +66,10 @@ const Description = ({ onLoadMore }) => {
           <div className="col-12">
             <div className={style.description__footer}>
               <div className={style.description__footer__btn}>
-                  <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
+                  <button onClick={() => onLoadMore(2)}>
+                  {
+                  isLoadingMore ? <Loader width={40} height={40} /> : 'Загрузить еще'
+                  } </button>
               </div>
             </div>
           </div>

src/components/Home/Home.js

@@ -6,14 +6,17 @@ import { fetchProfile, fetchSkills } from '../../server/server';
 import { profiles, tags } from '../../redux/outstaffingSlice';
 
 const Home = () => {
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [index, setIndex] = useState(4);
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-    fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index).then((profileArr) =>
+    setIsLoadingMore(true);
-      dispatch(profiles(profileArr))
+    fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index).then((profileArr) => {
-    );
+      dispatch(profiles(profileArr));
+      setIsLoadingMore(false);
+    });
 
     fetchSkills(`${process.env.REACT_APP_API_URL}/api/skills/skills-on-main-page`).then((skills) => {
       const keys = Object.keys(skills);
@@ -35,7 +38,7 @@ const Home = () => {
   return (
     <>
       <Outstaffing />
-      <Description onLoadMore={loadMore} />
+      <Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} />
     </>
   );
 };

src/components/Loader/Loader.js

@@ -1,14 +1,14 @@
 import SVGLoader from "react-loader-spinner";
 import './loader.css'
 
-export const Loader = () => {
+export const Loader = ({ width=50, height=50 }) => {
     return (
         <div className='loader'>
             <SVGLoader
                 type="Circles"
                 color="#fff"
-                height={50}
+                height={height}
-                width={50}
+                width={width}
             />
         </div>
     );

src/components/LogoutButton/LogoutButton.js

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { Loader } from '../Loader/Loader';
 import { auth } from '../../redux/outstaffingSlice';
 
 import './logoutButton.css'
 
 export const LogoutButton = () => {
+    const [isLoggingOut, setIsLoggingOut] = useState(false);
     const dispatch = useDispatch();
     return (
-        <div className='logout-button' onClick={()=>{localStorage.clear(); dispatch(auth(false));}}>
+        <div className='logout-button'>
-            <button>Выйти</button>
+            <button onClick={()=>{setIsLoggingOut(true); localStorage.clear(); dispatch(auth(false)); setIsLoggingOut(false); }}>
+            {
+            isLoggingOut ? <Loader /> : 'Выйти'
+            } </button>
         </div>
     )
 }

src/components/Select/TagSelect.js

@@ -1,28 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Select from 'react-select';
 import { Loader } from '../Loader/Loader';
 import style from './TagSelect.module.css';
 import { selectedItems, selectItems, selectTags, filteredCandidates, setPositionId } from '../../redux/outstaffingSlice';
 import { fetchItemsForId } from '../../server/server';
-import { selectIsLoading } from '../../redux/loaderSlice';
 
 const TagSelect = () => {
+  const [searchLoading, setSearchLoading] = useState(false);
   const dispatch = useDispatch();
-  const isLoading = useSelector(selectIsLoading)
 
   const itemsArr = useSelector(selectItems);
 
   const tagsArr = useSelector(selectTags);
 
-  const handleSubmit = ({ dispatch }) => {
+  const handleSubmit = ({ dispatch, setSearchLoading }) => {
+    setSearchLoading(true)
 
     dispatch(setPositionId(null));
     const filterItemsId = itemsArr.map((item) => item.id).join();
 
-    fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?skills=`, filterItemsId).then((el) =>
+    fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?skills=`, filterItemsId).then((el) => {
       dispatch(filteredCandidates(el))
-    );
+      setSearchLoading(false)
+    });
 
     // dispatch(selectedItems([]));
   };
@@ -45,8 +46,8 @@ const TagSelect = () => {
                     return { id: item.id, value: item.value, label: item.value };
                   })}
                 />
-                <button onClick={()=>handleSubmit({dispatch})} type="submit" className={style.search__submit}>
+                <button onClick={()=>handleSubmit({dispatch, setSearchLoading})} type="submit" className={style.search__submit}>
-                { isLoading ? <Loader /> : 'Поиск' }
+                { searchLoading ? <Loader width={30} height={30} /> : 'Поиск' }
                 </button>
               </div>
             </div>