diff --git a/github-automated-repos-page/new/index.html b/github-automated-repos-page/new/index.html index 5968805..7f34603 100644 --- a/github-automated-repos-page/new/index.html +++ b/github-automated-repos-page/new/index.html @@ -8,6 +8,6 @@
- + diff --git a/github-automated-repos-page/new/package.json b/github-automated-repos-page/new/package.json index b48b1b1..958b1be 100644 --- a/github-automated-repos-page/new/package.json +++ b/github-automated-repos-page/new/package.json @@ -15,6 +15,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.10.1", + "react-loader-spinner": "^5.3.4", "react-router-dom": "^6.15.0", "react-toastify": "^9.1.3", "vite-plugin-svgr": "^3.2.0" diff --git a/github-automated-repos-page/new/src/components/Loader/index.jsx b/github-automated-repos-page/new/src/components/Loader/index.jsx index e69de29..e1f4889 100644 --- a/github-automated-repos-page/new/src/components/Loader/index.jsx +++ b/github-automated-repos-page/new/src/components/Loader/index.jsx @@ -0,0 +1,16 @@ +import { ThreeDots } from 'react-loader-spinner' + +export default function Loader() { + return ( + + ) +} \ No newline at end of file diff --git a/github-automated-repos-page/new/src/pages/ProjectIcons.jsx b/github-automated-repos-page/new/src/pages/ProjectIcons.jsx index c2dab10..f9e56f2 100644 --- a/github-automated-repos-page/new/src/pages/ProjectIcons.jsx +++ b/github-automated-repos-page/new/src/pages/ProjectIcons.jsx @@ -7,6 +7,7 @@ import Header from "../components/Header"; import Sidebar from "../components/Sidebar"; import { IconsData } from 'github-automated-repos/index'; import { Card } from "../components/Card"; +import Loader from '../components/Loader'; export default function IconsProject() { @@ -15,7 +16,7 @@ export default function IconsProject() { window.scrollTo(0, 0); const id = setTimeout(() => { setFinishedTimeout(true); - }, 1000); + }, 350); return () => clearTimeout(id); @@ -26,16 +27,16 @@ export default function IconsProject() { const [finishedTimeout, setFinishedTimeout] = useState(false); - const [stackIconKeys, setStackIconKeys] = useState([]); - const [stackIconValues, setStackIconValues] = useState([]); + const [projectsIconKeys, setProjectsIconKeys] = useState([]); + const [projectsIconValues, setProjectsIconValues] = useState([]); const [inicialStackIconKeys, setInicialStackIconKeys] = useState([]); const [inicialStackIconValues, setInicialStackIconValues] = useState([]); useEffect(() => { - setStackIconKeys(Object.keys(iconsProjects)); - setStackIconValues(Object.values(iconsProjects)); + setProjectsIconKeys(Object.keys(iconsProjects)); + setProjectsIconValues(Object.values(iconsProjects)); setInicialStackIconKeys(Object.keys(iconsProjects)); setInicialStackIconValues(Object.values(iconsProjects)); @@ -43,22 +44,22 @@ export default function IconsProject() { function _handleSearch(e) { if (!e.target.value) { - setStackIconKeys(inicialStackIconKeys); - setStackIconValues(inicialStackIconValues); + setProjectsIconKeys(inicialStackIconKeys); + setProjectsIconValues(inicialStackIconValues); return; } const filterStackIconKeys = inicialStackIconKeys.filter((values) => { return values.includes(e.target.value.toLowerCase()); }); - setStackIconKeys(filterStackIconKeys); + setProjectsIconKeys(filterStackIconKeys); console.log(filterStackIconKeys); const filterStackIconValues = filterStackIconKeys.map((iconKey) => { return iconsProjects[iconKey]; }); - setStackIconValues(filterStackIconValues); + setProjectsIconValues(filterStackIconValues); } return (
@@ -77,11 +78,11 @@ export default function IconsProject() {