BOD-39 WIP Loading

client/src/components/global-loading-bar/global-loading-bar.component.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect } from "react";
-import { Progress } from "antd";
-import LoadingBar from "react-top-loading-bar";
+import { useNProgress } from "@tanem/react-nprogress";
+import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectLoading } from "../../redux/application/application.selectors";
@@ -10,31 +9,45 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export default connect(mapStateToProps, null)(GlobalLoadingHeader);
-
 function GlobalLoadingHeader({ loading }) {
-  console.log("loading", loading);
-  let l;
+  const { animationDuration, isFinished, progress } = useNProgress({
+    isAnimating: loading
+  });
 
-  useEffect(() => {
-    if (l) {
-      if (loading) {
-        l.continuousStart();
-      } else {
-        l.complete();
-      }
-    }
-  }, [loading, l]);
   return (
-    <div>
-      <LoadingBar height={3} onRef={ref => (l = ref)} />
-      <button onClick={() => l.continuousStart()}>
-        Start Continuous Bar Loading
-      </button>
-      <button onClick={() => l.staticStart()}>Start Static Bar Loading</button>
-      <button onClick={() => l.complete()}>Complete</button>
-      <br />
-      <button onClick={() => l.add(10)}>Add 10</button>
-      <button onClick={() => l.add(10)}>Add 30</button>
+    <div
+      style={{
+        opacity: isFinished ? 0 : 1,
+        pointerEvents: "none",
+        transition: `opacity ${animationDuration}ms linear`
+      }}
+    >
+      <div
+        style={{
+          background: "#29d",
+          height: 4,
+          left: 0,
+          marginLeft: `${(-1 + progress) * 100}%`,
+          position: "fixed",
+          top: 0,
+          transition: `margin-left ${animationDuration}ms linear`,
+          width: "100%",
+          zIndex: 1031
+        }}
+      >
+        <div
+          style={{
+            boxShadow: "0 0 10px #29d, 0 0 5px #29d",
+            display: "block",
+            height: "100%",
+            opacity: 1,
+            position: "absolute",
+            right: 0,
+            transform: "rotate(3deg) translate(0px, -4px)",
+            width: 100
+          }}
+        />
+      </div>
     </div>
   );
 }