BOD-36 #comment Issue encountered when changing loading status from parent container in App.Container.jsx. No issues when changing status from another component.

client/src/components/_test/test.component.jsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import {
+  startLoading,
+  endLoading
+} from "../../redux/application/application.actions";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import T, {
   Subject
@@ -11,31 +15,37 @@ const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = dispatch => ({
-  setEmailOptions: e => dispatch(setEmailOptions(e))
+  setEmailOptions: e => dispatch(setEmailOptions(e)),
+  load: () => dispatch(startLoading()),
+  endload: () => dispatch(endLoading())
 });
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function Test({ setEmailOptions }) {
+)(function Test({ setEmailOptions, load, endload }) {
   return (
-    <button
-      onClick={() =>
-        setEmailOptions({
-          messageOptions: {
-            from: { name: "Kavia Autobody", address: "noreply@bodyshop.app" },
-            to: "patrickwf@gmail.com",
-            replyTo: "snaptsoft@gmail.com",
-            subject: Subject
-          },
-          template: T,
-          queryConfig: [
-            EMAIL_APPOINTMENT_CONFIRMATION,
-            { variables: { id: "91bb31dd-ea87-4cfc-bbe2-2ec754dcb861" } }
-          ]
-        })
-      }
-    >
-      Set email config.
-    </button>
+    <div>
+      <button
+        onClick={() =>
+          setEmailOptions({
+            messageOptions: {
+              from: { name: "Kavia Autobody", address: "noreply@bodyshop.app" },
+              to: "patrickwf@gmail.com",
+              replyTo: "snaptsoft@gmail.com",
+              subject: Subject
+            },
+            template: T,
+            queryConfig: [
+              EMAIL_APPOINTMENT_CONFIRMATION,
+              { variables: { id: "91bb31dd-ea87-4cfc-bbe2-2ec754dcb861" } }
+            ]
+          })
+        }
+      >
+        Set email config.
+      </button>
+      <button onClick={() => load()}>Load</button>
+      <button onClick={() => endload()}>Stop</button>
+    </div>
   );
 });

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

@@ -1,9 +1,8 @@
-import React, { useEffect } from "react";
-import { Progress } from "antd";
-import LoadingBar from "react-top-loading-bar";
+import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectLoading } from "../../redux/application/application.selectors";
+import { useNProgress } from "@tanem/react-nprogress";
 
 const mapStateToProps = createStructuredSelector({
   loading: selectLoading
@@ -12,29 +11,43 @@ const mapStateToProps = createStructuredSelector({
 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]);
+  const { animationDuration, isFinished, progress } = useNProgress({
+    isAnimating: loading
+  });
   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>
   );
 }