Loading bar not working with redux-persist

[nikhilracha]

I have implemented react-redux-loading-bar with

loadingBarMiddleware(
            {
                promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
            }

and it was working perfectly fine. But after implementing the redux-persist the loading bar is not visible anymore.

After redux-persist store.js

function configureStore(initialState = {}) {

    const persistConfig = {
        key: 'root',
        storage,
        whitelist: ['auth', 'patients', 'tests', 'store', 'loadingBar'],
    }

    const persistedReducer = persistReducer(persistConfig, rootReducer)
    const store = createStore(persistedReducer, initialState, compose(
        applyMiddleware(thunk, loadingBarMiddleware(
            {
                promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
            }
        )),
        window.__REDUX_DEVTOOLS_EXTENSION__ && 
     window.__REDUX_DEVTOOLS_EXTENSION__()
    ));
    console.log("initialState", store.getState());
    const persistor = persistStore(store, null, () => {
        // if you want to get restoredState
        console.log("restoredState", store.getState());
    });
    return { store, persistor };
}
export default configureStore;

Header.js

function Header() {

    const { store, persistor } = configureStore();
    return (
        <header>
            <Provider store={store} >
                <PersistGate persistor={persistor}>
                <LoadingBar
                    //loading={1}
                    style={{ height: "1.5px", opacity: "1", zIndex: "100000" }}
                />
                </PersistGate >
            </Provider >

In the redux tool, I can see that reducers are firing but I cannot see the loading bar?? Any idea??

[mironov]

@nikhilracha Hi there. It is hard to say from this what's wrong exactly. If you pass loading={1} to the component, does it become visible?

[nikhilracha]

No, it's not visible. To cut short.. Here is the thing. I am using redux, thunk and loading bar middleware to show the side effects. But when i implement the same along with redux-persist, the loading bar is not visible. But, the reducers are being implemented such as LOADING_BAR_SHOW, LOADING_BAR_HIDE ....... I don't understand why the loading bar is not visible even when the reducers are getting implemented

[mironov]

@nikhilracha I'm not sure either. Can you come up with a demo with redux-persist? I can't think of a reason how it can break the Loading Bar now.