Creado loader y mejorada la carga de los proyectos

Author: titoworlddev

src/components/Loader/Loader.jsx

@@ -0,0 +1,11 @@
+import './_Loader.scss';
+
+export default function Loader() {
+  return (
+    <div className="loader">
+      <span className="bar"></span>
+      <span className="bar"></span>
+      <span className="bar"></span>
+    </div>
+  );
+}

src/components/Loader/_Loader.scss

@@ -0,0 +1,36 @@
+.loader {
+  display: flex;
+  align-items: center;
+  margin-inline: auto;
+  margin-block: 5% 35%;
+}
+
+.bar {
+  display: inline-block;
+  width: 3px;
+  height: 20px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  animation: scale-up4 1s linear infinite;
+}
+
+.bar:nth-child(2) {
+  height: 35px;
+  margin: 0 5px;
+  animation-delay: 0.25s;
+}
+
+.bar:nth-child(3) {
+  animation-delay: 0.5s;
+}
+
+@keyframes scale-up4 {
+  20% {
+    background-color: #ffff;
+    transform: scaleY(1.5);
+  }
+
+  40% {
+    transform: scaleY(1);
+  }
+}

src/components/ProjectsSection/ProjectsSection.jsx

@@ -1,24 +1,25 @@
 import { useState } from 'react';
-import ProjectCard from '../ProjectCard/ProjectCard';
 import './_ProjectsSection.scss';
 import { getJSON } from '/src/utils/projects/tarjetasAssets';
 import Project from '../Project/Project';
 import { useEffect } from 'react';
+import Loader from '../Loader/Loader';
 
 export default function ProjectsSection() {
   const [category, setCategory] = useState('web');
-  const [project, setProject] = useState({});
   const [tarjetasAssets, setTarjetasAssets] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    getJSON('/assets/json/tarjetaAssets.json').then(assets =>
-      setTarjetasAssets(assets)
-    );
+    setIsLoading(true);
+    getJSON('/assets/json/tarjetaAssets.json').then(assets => {
+      setTarjetasAssets(assets);
+      setTimeout(() => setIsLoading(false), 500);
+    });
   }, []);
 
-  const categoryEntries = Object.entries(tarjetasAssets).filter(
-    ([, v]) => v.category === category
-  );
+  const categoryEntries = e =>
+    Object.entries(tarjetasAssets).filter(([, v]) => v.category === e);
 
   const handleSetCategory = e => {
     const category = e.target.id;
@@ -50,8 +51,24 @@ export default function ProjectsSection() {
         </li>
       </ul>
 
-      <div id={`trabajos-${category}`} className="trabajos-container">
-        {categoryEntries.map(([key, value]) => (
+      {isLoading && <Loader />}
+
+      <div
+        className="trabajos-container"
+        style={{ display: !isLoading && category === 'web' ? 'grid' : 'none' }}
+      >
+        {categoryEntries('web').map(([key, value]) => (
+          <Project key={key} name={key} project={value} />
+        ))}
+      </div>
+
+      <div
+        className="trabajos-container"
+        style={{
+          display: !isLoading && category === 'movil' ? 'grid' : 'none'
+        }}
+      >
+        {categoryEntries('movil').map(([key, value]) => (
           <Project key={key} name={key} project={value} />
         ))}
       </div>