frontend: Loader + Refactoring

frontend/components/FunctionCard/FunctionCard.css

@@ -11,6 +11,12 @@
     cursor: pointer;
     transition: all .3s;
 }
+.FunctionCard__container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
 .FunctionCard:hover {
     transform: translateY(-7px);
 }

frontend/components/FunctionCard/FunctionCard.js

@@ -1,20 +1,36 @@
 import Link from 'next/link';
+import { useState, Fragment } from 'react';
+import Loader from '../Loader/Loader';
 import './FunctionCard.css';
 
-const FunctionCard = (props) =>  (
-    <Link href={`/functions/${props.slug}`}>
-        <div className="FunctionCard col-sm-24 col-md-10 col-xl-7">
-            <div className="FunctionCard__top">
-                <img className="FunctionCard__image" alt={props.title} src={props.image} />
-                <h2 className="FunctionCard__title">{props.title}</h2>
-                <p className="FunctionCard__description">{props.description}</p>
-            </div>
-            <div className="FunctionCard__info">
-                <p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
-                <p className="FunctionCard__publication-date">{props.publicationDate}</p>
-            </div>
-        </div>
-    </Link>
-);
+const FunctionCard = (props) => {
+
+    const [isLoading, setIsLoading] = useState(true);
+
+    const handleLoad = () => {
+        setIsLoading(false);
+    }
+
+    return (
+        <Link href={`/functions/${props.slug}`}>
+            <Fragment>
+                <div className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
+                    {isLoading && <Loader width="100px" height="100px" />} 
+                    <div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
+                        <div className="FunctionCard__top">
+                            <img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
+                            <h2 className="FunctionCard__title">{props.title}</h2>
+                            <p className="FunctionCard__description">{props.description}</p>
+                        </div>
+                        <div className="FunctionCard__info">
+                            <p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
+                            <p className="FunctionCard__publication-date">{props.publicationDate}</p>
+                        </div>
+                    </div>
+                </div>
+            </Fragment>
+        </Link>
+    );
+} 
 
 export default FunctionCard;

frontend/components/Loader/Loader.css

@@ -0,0 +1,13 @@
+.Loader {
+    transform-origin: 50% 50%; animation: .9s linear 0s infinite normal forwards running Loader__spin;
+}
+
+@keyframes Loader__spin {
+    0% {
+        animation-timing-function: cubic-bezier(0.5856,0.0703,0.4143,0.9297);
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

frontend/components/Loader/Loader.js

@@ -0,0 +1,11 @@
+import './Loader.css';
+
+const Loader = ({ width, height }) => (
+    <svg width={width} height={height} viewBox="0 0 100 100">
+        <g transform="translate(50 50) rotate(0) scale(1 1) translate(-50 -50)">
+            <image className="Loader" x="0" y="0" width="100" height="100" href="/images/FunctionProject_icon.png"></image>
+        </g>
+    </svg>
+);
+
+export default Loader;