Loading Bar not being displayed

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

Here is the Component Using loading bar:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Collapse, Navbar, NavbarToggler, NavbarBrand} from 'reactstrap';
import LoadingBar from 'react-redux-loading-bar'

class NavigationBar extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Navbar fixed="top" expand="md" dark color="dark">
                ... Some content
                </Navbar>
                <LoadingBar />
            </div>
        );
    }
}

function mapStateToProps({auth_user}) {
    return {auth_user};
}

export default connect(mapStateToProps)(NavigationBar);

Here is the reducer:

import {combineReducers} from 'redux';
import { loadingBarReducer } from 'react-redux-loading-bar'


const rootReducer = combineReducers({
    ...... some reducers
    loadingBar: loadingBarReducer
});

export default rootReducer;

[mironov]

@hamza-jutt Hi Hamza. Looks like you are using redux-promise which doesn't dispatch additional pending/done actions like other promise middlewares do (for example, redux-promise-middleware). See this issue on the difference: pburtchaell/redux-promise-middleware#27

The Loading Bar's middleware that is shipped with the library expects that your promise middleware fires pending/done actions. That allows to show/hide Loading Bar automatically.
You can show and hide Loading Bar manually by dispatching showLoading and hideLoading actions.
Another option is to switch to another promise middleware, for example the one that I mentioned earlier: redux-promise-middleware

[mironov]

@hamza-jutt I'm going to close the issue as there seem to be nothing to fix in the Loading Bar. Feel free to reopen if you have any question.

[hamza-jutt]

Thanks @mironov Rather than dispatching hide and show I'll go with updating the middleware to redux-promise-middleware and it works.

Although I'm facing a problem with the loading bar. The loading bar on show starts from the maxProgress value set and not from 0. it does not move gradually.

[mironov]

@hamza-jutt That is weird. Could it be that hideLoading is invoked right after showLoading? Do you have redux logging middleware installed? Please check with the log for the list of dispatched actions.