Skip to content

Commit 4aeff39

Browse files
digoarthurdigoarthur
committed
feat(component): add Loader component in ProjectIcon Page and StackIcon Page
1 parent 8631768 commit 4aeff39

File tree

6 files changed

+223
-41
lines changed

6 files changed

+223
-41
lines changed

‎github-automated-repos-page/new/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script type="module" src="/main.jsx"></script>
11+
<script type="module" src="/src/main.jsx"></script>
1212
</body>
1313
</html>

‎github-automated-repos-page/new/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"react": "^18.2.0",
1616
"react-dom": "^18.2.0",
1717
"react-icons": "^4.10.1",
18+
"react-loader-spinner": "^5.3.4",
1819
"react-router-dom": "^6.15.0",
1920
"react-toastify": "^9.1.3",
2021
"vite-plugin-svgr": "^3.2.0"

‎github-automated-repos-page/new/src/components/Loader/index.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ThreeDots } from 'react-loader-spinner'
2+
3+
export default function Loader() {
4+
return (
5+
<ThreeDots
6+
height="80"
7+
width="80"
8+
radius="9"
9+
color="#99A1B3"
10+
ariaLabel="three-dots-loading"
11+
wrapperStyle={{}}
12+
wrapperClassName=""
13+
visible={true}
14+
/>
15+
)
16+
}

‎github-automated-repos-page/new/src/pages/ProjectIcons.jsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Header from "../components/Header";
77
import Sidebar from "../components/Sidebar";
88
import { IconsData } from 'github-automated-repos/index';
99
import { Card } from "../components/Card";
10+
import Loader from '../components/Loader';
1011

1112
export default function IconsProject() {
1213

@@ -15,7 +16,7 @@ export default function IconsProject() {
1516
window.scrollTo(0, 0);
1617
const id = setTimeout(() => {
1718
setFinishedTimeout(true);
18-
}, 1000);
19+
}, 350);
1920

2021
return () => clearTimeout(id);
2122

@@ -26,39 +27,39 @@ export default function IconsProject() {
2627

2728
const [finishedTimeout, setFinishedTimeout] = useState(false);
2829

29-
const [stackIconKeys, setStackIconKeys] = useState([]);
30-
const [stackIconValues, setStackIconValues] = useState([]);
30+
const [projectsIconKeys, setProjectsIconKeys] = useState([]);
31+
const [projectsIconValues, setProjectsIconValues] = useState([]);
3132

3233
const [inicialStackIconKeys, setInicialStackIconKeys] = useState([]);
3334
const [inicialStackIconValues, setInicialStackIconValues] = useState([]);
3435
useEffect(() => {
3536

3637

37-
setStackIconKeys(Object.keys(iconsProjects));
38-
setStackIconValues(Object.values(iconsProjects));
38+
setProjectsIconKeys(Object.keys(iconsProjects));
39+
setProjectsIconValues(Object.values(iconsProjects));
3940

4041
setInicialStackIconKeys(Object.keys(iconsProjects));
4142
setInicialStackIconValues(Object.values(iconsProjects));
4243
}, []);
4344

4445
function _handleSearch(e) {
4546
if (!e.target.value) {
46-
setStackIconKeys(inicialStackIconKeys);
47-
setStackIconValues(inicialStackIconValues);
47+
setProjectsIconKeys(inicialStackIconKeys);
48+
setProjectsIconValues(inicialStackIconValues);
4849
return;
4950
}
5051

5152
const filterStackIconKeys = inicialStackIconKeys.filter((values) => {
5253
return values.includes(e.target.value.toLowerCase());
5354
});
54-
setStackIconKeys(filterStackIconKeys);
55+
setProjectsIconKeys(filterStackIconKeys);
5556
console.log(filterStackIconKeys);
5657

5758
const filterStackIconValues = filterStackIconKeys.map((iconKey) => {
5859
return iconsProjects[iconKey];
5960
});
6061

61-
setStackIconValues(filterStackIconValues);
62+
setProjectsIconValues(filterStackIconValues);
6263
}
6364
return (
6465
<div>
@@ -77,11 +78,11 @@ export default function IconsProject() {
7778
</div>
7879
<ul className='mt-8 flex flex-wrap gap-4 justify-center'>
7980
{
80-
finishedTimeout == false ? (<div>carregando</div>) : (
81-
stackIconValues.length > 0 ? (
81+
finishedTimeout == false ? (<Loader/>) : (
82+
projectsIconValues.length > 0 ? (
8283

83-
stackIconValues.map((item, index) => {
84-
return <Card key={index} item={item} iconKey={stackIconKeys[index]} />;
84+
projectsIconValues.map((item, index) => {
85+
return <Card key={index} item={item} iconKey={projectsIconKeys[index]} />;
8586
})
8687

8788

‎github-automated-repos-page/new/src/pages/StackIcons.jsx‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,33 @@ import { FiExternalLink } from 'react-icons/fi';
66
import Footer from "../components/Footer";
77
import Header from "../components/Header";
88
import Sidebar from "../components/Sidebar";
9-
import {Card} from "../components/Card";
9+
import { Card } from "../components/Card";
1010
import { IconsData } from 'github-automated-repos/index';
11+
import Loader from '../components/Loader';
1112

1213

13-
export default function IconStacks(){
14+
export default function IconStacks() {
1415

1516
useEffect(() => {
1617
window.scrollTo(0, 0);
17-
18-
19-
}, []);
18+
const id = setTimeout(() => {
19+
setFinishedTimeout(true);
20+
}, 350);
21+
22+
return () => clearTimeout(id);
23+
24+
}, []);
2025
const { iconStacks } = IconsData();
21-
26+
27+
const [finishedTimeout, setFinishedTimeout] = useState(false);
28+
2229
const [stackIconKeys, setStackIconKeys] = useState([]);
2330
const [stackIconValues, setStackIconValues] = useState([]);
2431

2532
const [inicialStackIconKeys, setInicialStackIconKeys] = useState([]);
2633
const [inicialStackIconValues, setInicialStackIconValues] = useState([]);
2734
useEffect(() => {
28-
35+
2936

3037
setStackIconKeys(Object.keys(iconStacks));
3138
setStackIconValues(Object.values(iconStacks));
@@ -47,7 +54,7 @@ export default function IconStacks(){
4754
setStackIconKeys(filterStackIconKeys);
4855
console.log(filterStackIconKeys);
4956

50-
const filterStackIconValues = filterStackIconKeys.map((iconKey ) => {
57+
const filterStackIconValues = filterStackIconKeys.map((iconKey) => {
5158
return iconStacks[iconKey];
5259
});
5360

@@ -69,21 +76,30 @@ export default function IconStacks(){
6976
<input className=' bg-[#70708e33] w-full rounded-lg px-4 py-2 ' placeholder='🔍 Search Icons' type='text' onChange={_handleSearch} />
7077
</div>
7178
<ul className='mt-8 flex flex-wrap gap-4 justify-center'>
72-
{stackIconValues.length > 0 ? (
73-
stackIconValues.map((item, index) => {
74-
return <Card key={index} item={item} iconKey={stackIconKeys[index]} />;
75-
})
76-
) : (
77-
<div className='flex flex-col m-auto gap-4'>
78-
<p className='text-xl text-center'>
79-
Didn't find your icon? <br /> Tell us about here:{' '}
80-
<a className='flex gap-2 text-[#00979C] justify-center' href='https://github.com/DIGOARTHUR/github-automated-repos/issues/new?assignees=&labels=&template=2-feature-request.yaml'>
81-
Feature Request <FiExternalLink />
82-
</a>
83-
</p>
84-
<img className='h-[350px]' src='https://user-images.githubusercontent.com/59892368/220364871-f553109d-855f-426a-bbe5-5e1c11278003.svg'></img>
85-
</div>
86-
)}
79+
80+
81+
{
82+
83+
finishedTimeout == false ? (<Loader />) : (
84+
stackIconValues.length > 0 ? (
85+
stackIconValues.map((item, index) => {
86+
return <Card key={index} item={item} iconKey={stackIconKeys[index]} />;
87+
})
88+
) : (
89+
<div className='flex flex-col m-auto gap-4'>
90+
<p className='text-xl text-center'>
91+
Didn't find your icon? <br /> Tell us about here:{' '}
92+
<a className='flex gap-2 text-[#00979C] justify-center' href='https://github.com/DIGOARTHUR/github-automated-repos/issues/new?assignees=&labels=&template=2-feature-request.yaml'>
93+
Feature Request <FiExternalLink />
94+
</a>
95+
</p>
96+
<img className='h-[350px]' src='https://user-images.githubusercontent.com/59892368/220364871-f553109d-855f-426a-bbe5-5e1c11278003.svg'></img>
97+
</div>
98+
)
99+
100+
)
101+
}
102+
87103

88104

89105
</ul>

0 commit comments

Comments
 (0)