From 3debd85a70112ab891c0bc7000ccf2dba3494e14 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Sat, 21 Mar 2020 20:48:46 +0100
Subject: [PATCH] frontend: NProgress Loader entre chaque page

---
 .../components/FunctionCard/FunctionCard.js   | 30 ++++---
 frontend/package-lock.json                    |  5 ++
 frontend/package.json                         |  1 +
 frontend/pages/_app.js                        |  7 ++
 frontend/public/css/nprogress.css             | 81 +++++++++++++++++++
 5 files changed, 108 insertions(+), 16 deletions(-)
 create mode 100644 frontend/public/css/nprogress.css

diff --git a/frontend/components/FunctionCard/FunctionCard.js b/frontend/components/FunctionCard/FunctionCard.js
index 77e49ba..adcd892 100644
--- a/frontend/components/FunctionCard/FunctionCard.js
+++ b/frontend/components/FunctionCard/FunctionCard.js
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { useState, Fragment, forwardRef } from 'react';
+import { useState, forwardRef } from 'react';
 import Loader from '../Loader/Loader';
 import './FunctionCard.css';
 
@@ -13,23 +13,21 @@ const FunctionCard = forwardRef((props, ref) => {
 
     return (
         <Link href={`/functions/${props.slug}`}>
-            <Fragment>
-                {/* Elément à une hauteur pendant chargement */}
-                <div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
-                    {isLoading && <Loader width="125px" height="125px" />} 
-                    <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>
+            {/* Elément à une hauteur pendant chargement */}
+            <div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
+                {isLoading && <Loader width="125px" height="125px" />} 
+                <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>
-            </Fragment>
+            </div>
         </Link>
     );
 }) 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 225a12e..2c91bac 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4897,6 +4897,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b2f8f14..85d0aeb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.19.2",
     "next": "9.3.1",
     "next-fonts": "^1.0.3",
+    "nprogress": "^0.2.0",
     "react": "16.13.0",
     "react-dom": "16.13.0"
   }
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 342b06a..2ef368e 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -1,5 +1,7 @@
 /* Libraries Imports */
 import { Fragment } from 'react';
+import Router from 'next/router'
+import NProgress from 'nprogress';
 
 /* Components Imports */
 import Header from '../components/Header/Header';
@@ -10,7 +12,12 @@ import '../public/fonts/Montserrat/Montserrat.css';
 import '../public/css/normalize.css';
 import '../public/css/grid.css';
 import '../public/css/general.css';
+import '../public/css/nprogress.css';
 
+Router.events.on('routeChangeStart', () => NProgress.start());
+Router.events.on('routeChangeComplete', () => NProgress.done());
+Router.events.on('routeChangeError', () => NProgress.done());
+  
 const App = ({ Component, pageProps }) => (
     <Fragment>
         <Header />
diff --git a/frontend/public/css/nprogress.css b/frontend/public/css/nprogress.css
new file mode 100644
index 0000000..ced84f3
--- /dev/null
+++ b/frontend/public/css/nprogress.css
@@ -0,0 +1,81 @@
+/* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: var(--important);
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px var(--important), 0 0 5px var(--important);
+    opacity: 1;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+}
+
+#nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: var(--important);
+    border-left-color: var(--important);
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+    animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@keyframes nprogress-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}