WIP Loading Header & Remaining changes from Sprint 1

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

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { Progress } from "antd";
+import LoadingBar from "react-top-loading-bar";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectLoading } from "../../redux/application/application.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  loading: selectLoading
+});
+
+export default connect(mapStateToProps, null)(GlobalLoadingHeader);
+
+function GlobalLoadingHeader({ loading }) {
+  console.log("loading", loading);
+  let l;
+
+  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>
+  );
+}