BOD-39 WIP Loading

client/src/App/App.container.jsx

@@ -9,11 +9,19 @@ import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
 import React, { Component } from "react";
 import { ApolloProvider } from "react-apollo";
+import { connect } from "react-redux";
 import SpinnerComponent from "../components/loading-spinner/loading-spinner.component";
 //import { shouldRefreshToken, refreshToken } from "../graphql/middleware";
 import errorLink from "../graphql/apollo-error-handling";
+import { endLoading, startLoading } from "../redux/application/application.actions";
 import App from "./App";
 
+
+const mapDispatchToProps = dispatch => ({
+  startLoading: () => dispatch(startLoading()),
+  endLoading: () => dispatch(endLoading())
+});
+
 class AppContainer extends Component {
   state = {
     client: null,
@@ -81,6 +89,24 @@ class AppContainer extends Component {
     if (process.env.NODE_ENV === "development") {
       middlewares.push(apolloLogger);
     }
+
+    //New
+    const startLoad = new ApolloLink((operation, forward) => {
+      console.log("Starting", operation);
+      this.props.startLoading();
+      return forward(operation);
+    });
+
+    const endLoad = new ApolloLink((operation, forward) => {
+      return forward(operation).map(response => {
+        console.log("Completed", operation);
+        this.props.endLoading();
+        return response;
+      });
+    });
+    middlewares.push(startLoad, endLoad);
+    //End new
+
     middlewares.push(errorLink.concat(authLink.concat(link)));
 
     const cache = new InMemoryCache();
@@ -113,5 +139,5 @@ class AppContainer extends Component {
     );
   }
 }
-
-export default AppContainer;
+export default connect(null, mapDispatchToProps)(AppContainer);
+//export default AppContainer;

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>
   );
 }