diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index 929495ee..8b9c214a 100644 --- a/src/components/Description/Description.js +++ b/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 }) => {
- +
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 84f7c31d..3e87521a 100644 --- a/src/components/Home/Home.js +++ b/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) => - dispatch(profiles(profileArr)) - ); + setIsLoadingMore(true); + 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 ( <> - + ); }; diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js index 4b757384..98b467e2 100644 --- a/src/components/Loader/Loader.js +++ b/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 (
); diff --git a/src/components/LogoutButton/LogoutButton.js b/src/components/LogoutButton/LogoutButton.js index 07d24e39..ad58e89c 100644 --- a/src/components/LogoutButton/LogoutButton.js +++ b/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 ( -
{localStorage.clear(); dispatch(auth(false));}}> - +
+
) } \ No newline at end of file diff --git a/src/components/Select/TagSelect.js b/src/components/Select/TagSelect.js index 0da18aad..f1456bf7 100644 --- a/src/components/Select/TagSelect.js +++ b/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 }; })} /> -