From 81615f054be5cdcbda1dfc49632a12d52542e9c9 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 21 Aug 2017 16:23:19 +0200
Subject: [PATCH 1/2] Add blue background to the top loadingBar

---
 src/components/loadingBar/loadingBar.css | 4 ++++
 src/components/loadingBar/loadingBar.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/loadingBar/loadingBar.css b/src/components/loadingBar/loadingBar.css
index 537c6cc38..5c5f2fc67 100644
--- a/src/components/loadingBar/loadingBar.css
+++ b/src/components/loadingBar/loadingBar.css
@@ -5,3 +5,7 @@
   width: 100vw;
   z-index: 201;
 }
+
+.linear {
+  background: rgb(60, 185, 253);
+}
diff --git a/src/components/loadingBar/loadingBar.js b/src/components/loadingBar/loadingBar.js
index 99827c14d..9c4964bf8 100644
--- a/src/components/loadingBar/loadingBar.js
+++ b/src/components/loadingBar/loadingBar.js
@@ -5,7 +5,7 @@ import styles from './loadingBar.css';
 const LoadingBar = props => (
   <div className={styles.fixedAtTop}>
     {props.loading && props.loading.length ?
-      <ProgressBar type="linear" mode="indeterminate" /> :
+      <ProgressBar type="linear" mode="indeterminate" theme={styles}/> :
       null
     }
   </div>

From c679dacb271cafa06fe922aa4e9d1288a3ebe418 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Tue, 22 Aug 2017 13:41:27 +0200
Subject: [PATCH 2/2] Create loadingBarMiddleware to not show loadingBar on
 status update

---
 src/store/middlewares/index.js           |  2 +
 src/store/middlewares/loadingBar.js      | 20 +++++++
 src/store/middlewares/loadingBar.test.js | 67 ++++++++++++++++++++++++
 3 files changed, 89 insertions(+)
 create mode 100644 src/store/middlewares/loadingBar.js
 create mode 100644 src/store/middlewares/loadingBar.test.js

diff --git a/src/store/middlewares/index.js b/src/store/middlewares/index.js
index 92f18ee23..3bed3c7b4 100644
--- a/src/store/middlewares/index.js
+++ b/src/store/middlewares/index.js
@@ -1,6 +1,7 @@
 import metronomeMiddleware from './metronome';
 import accountMiddleware from './account';
 import loginMiddleware from './login';
+import loadingBarMiddleware from './loadingBar';
 import offlineMiddleware from './offline';
 import notificationMiddleware from './notification';
 
@@ -8,6 +9,7 @@ export default [
   loginMiddleware,
   metronomeMiddleware,
   accountMiddleware,
+  loadingBarMiddleware,
   offlineMiddleware,
   notificationMiddleware,
 ];
diff --git a/src/store/middlewares/loadingBar.js b/src/store/middlewares/loadingBar.js
new file mode 100644
index 000000000..9357a83e5
--- /dev/null
+++ b/src/store/middlewares/loadingBar.js
@@ -0,0 +1,20 @@
+import actionsType from '../../constants/actions';
+
+const ignoredLoadingActionKeys = ['loader/status'];
+
+const loadingBarMiddleware = () => next => (action) => {
+  switch (action.type) {
+    case actionsType.loadingStarted:
+    case actionsType.loadingFinished:
+      if (ignoredLoadingActionKeys.indexOf(action.data) === -1) {
+        next(action);
+      }
+      break;
+    default:
+      next(action);
+      break;
+  }
+};
+
+export default loadingBarMiddleware;
+
diff --git a/src/store/middlewares/loadingBar.test.js b/src/store/middlewares/loadingBar.test.js
new file mode 100644
index 000000000..3f0610e12
--- /dev/null
+++ b/src/store/middlewares/loadingBar.test.js
@@ -0,0 +1,67 @@
+import { expect } from 'chai';
+import { spy, stub } from 'sinon';
+import middleware from './loadingBar';
+import actionType from '../../constants/actions';
+
+
+describe('LoadingBar middleware', () => {
+  let store;
+  let next;
+  const ignoredLoadingActionKeys = ['loader/status'];
+
+  beforeEach(() => {
+    store = stub();
+    store.dispatch = spy();
+    next = spy();
+  });
+
+  it('should pass the action to next middleware on some random action', () => {
+    const randomAction = {
+      type: 'TEST_ACTION',
+    };
+
+    middleware(store)(next)(randomAction);
+    expect(next).to.have.been.calledWith(randomAction);
+  });
+
+  it(`should not call next on ${actionType.loadingStarted} action if action.data == '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingStarted,
+      data: ignoredLoadingActionKeys[0],
+    };
+
+    middleware(store)(next)(action);
+    expect(next).not.to.have.been.calledWith(action);
+  });
+
+  it(`should not call next on ${actionType.loadingFinished} action if action.data == '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingFinished,
+      data: ignoredLoadingActionKeys[0],
+    };
+
+    middleware(store)(next)(action);
+    expect(next).not.to.have.been.calledWith(action);
+  });
+
+  it(`should call next on ${actionType.loadingStarted} action if action.data != '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingStarted,
+      data: 'something/else',
+    };
+
+    middleware(store)(next)(action);
+    expect(next).to.have.been.calledWith(action);
+  });
+
+  it(`should call next on ${actionType.loadingFinished} action if action.data != '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingFinished,
+      data: 'something/else',
+    };
+
+    middleware(store)(next)(action);
+    expect(next).to.have.been.calledWith(action);
+  });
+});
+