Loading Bar not displayed about react-redux-loading-bar

[tripstar22]

@mironov thanks for the response. Yup you're correct about using the fetching prop.

Seems to be working now so I will close this issue. Thanks again!

[mironov]

@tripstar22 Hi there. Am I right that you don't use any promise middleware and you will control the visibility of your ProgressBar by yourself using the fetching prop?

If that is true, I think you can import not connected LoadingBar component and mount it directly.
Something like this should work for you:

import { LoadingBar } from 'react-redux-loading-bar';

# <...> removed styles for the purpose of brevity

const ProgressBar = ({ fetching }) => (
  <WrapProgressBar fetching={fetching}>
    <header>
      <LoadingBar loading={1} style={{ backgroundColor: InfoColor, height: '10px', opacity: '1', zIndex: '100000' }} />
    </header>
    <GradientOverlay />
  </WrapProgressBar>
);

You can also skip the middleware and reducer steps because they are needed to show/hide the loading bar automatically during long-running actions.

Please let me know if that helps.

[hamza-jutt]

Hello! @mironov
I've a similar issue. Loading bar is not being displayed.

Here is the store config. I'm using axios.

import promise from 'redux-promise';
import thunk from 'redux-thunk';
import {applyMiddleware, createStore, compose} from 'redux';
import { loadingBarMiddleware } from 'react-redux-loading-bar'


const store = createStore(
    reducers,
    compose(
        applyMiddleware(promise, thunk, loadingBarMiddleware()),
        window.devToolsExtension ? window.devToolsExtension() : f => f
   )
);

[mironov]

@hamza-jutt Please open a new issue and show how you mount Loading Bar.