Loading bar is not displayed?

[Dani-Boy92]

Hi,

I know this question has been asked a lot in the past, but somehow I am not able to display the progress bar.

When I look at the page, I can't find a snippet in the form:

<div style="width: 0%; transition: width 400ms ease-out, height 400ms linear, opacity 400ms ease-out; opacity: 0; height: 3px; background-color: red; position: absolute;"></div><div style="display: table; clear: both;"></div>

I use Thunk Middleware.

Component with <LoadingBar />

export class Header extends Component {
    static propTypes = {
        auth: PropTypes.object.isRequired,
        logout: PropTypes.func.isRequired,
        profile:PropTypes.object.isRequired
    };



    render() {
        const { isAuthenticated, user } = this.props.auth;
        const {isFetching, profile} = this.props.profile;

        const authLinks = (
            <ul className="navbar-nav justify-content-end">
        <span className="navbar-text mr-3">
          <strong>{user ? <Link to={"/profile/"+ (!isFetching? profile[0].id : null)}>{user.username}</Link> : null}</strong>
        </span>
                <li className="nav-item">
                    <Link className="nav-link abtn" to="/add_story">Add Story </Link> </li>
                <div className="headertest"><li className="float:right-align nav-item"><button onClick={this.props.logout} className="nav-link btn btn-info btn-sm text-light">Logout</button>  </li></div>
                
            </ul>
        );

        const guestLinks = (

             <div className="collapse navbar-collapse w-100" id="navbarSupportedContent">
                <ul className="navbar-nav w-100 justify-content-end " >
                    <li className="nav-item" >
                        <Link className="nav-link abtn" to="/register"   style={{color: '#ffffff'}}>Register <span className="sr-only">(current)</span></Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link abtn" to="/login"   style={{color: '#ffffff'}}>Login</Link>
                    </li>
                </ul>
            </div>

        );

        return (
            <nav className="navbar navbar-expand-md navbar-light fixed-top"
                 style={{backgroundColor: '#F16852'
                 }} expand="lg">
                <a className="navbar-brand" href="/" id="smallLinkButton"><img
                    id="smallLinkButton"
                    src="suyuh.png"
                    width="110"
                    height="42"
                    className="d-inline-block align-top"
                    alt="logo"
                /></a>

                <button className="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon "></span>
                </button>
                {isAuthenticated  ? authLinks : guestLinks}
                <LoadingBar />
            </nav>
            
                

        );
    }
}

function mapStateToProps(state, ownProps) {
    const auth = state.auth
    const profile = state.profile



  return { auth, profile }
};

export default connect(
    mapStateToProps,
    { logout }
)(Header);

Installed reducer at the store:

import { combineReducers } from "redux";
import story from "./story";
import place from "./place";
import auth from "./auth";
import profile from "./profile";
import messages from "./messages";
import errors from "./errors";
import { loadingBarReducer } from 'react-redux-loading-bar'




export default combineReducers({
	story,
	place,
	profile,
	auth,
	errors,
	messages,
	loadingBar: loadingBarReducer,
});

Example action were i dispatch showLoading():

// GET STORY
export const getStory = () => (dispatch, getState) => {
  dispatch ({type: GET_STORY_REQUEST});
  dispatch(showLoading());
  axios.get( apiBase + "/story/retrieve/", tokenConfig(getState))
    .then(res => {
      dispatch({
        type: GET_STORY_SUCCESS,
        payload: res.data
      });
      dispatch(hideLoading());
    })
  .catch(err =>{
      dispatch({
        payload: returnErrors(err.response.data, err.response.status),
        type: GET_STORY_FAILURE });
      dispatch(hideLoading());
    })
};

I'm happy for any clarification.

[mironov]

@Dani-Boy92 Hey, everything seems right from the first look. Could you make sure that Loading Bar is shown when explicitly set to loading="1"?

You would need to import not decorated Loading Bar component and mount it as follows:

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

// ...

<LoadingBar loading="1" />

[ProIcons]

I have the same issue, actions are getting dispaatched and loading bar isn't showing. with loading=1 it does.
I have another prroject where it works as expected. same versions

I ended up doing this ugly thing:

<LoadingBar loading={this.props.rootState.loadingBar.app} scope={"app"} showFastActions className="loading-bar"/>

[mironov]

@ProIcons Just to double-check: how do you import LoadingBar?

import LoadingBar from 'react-redux-loading-bar' connects to Redux store automatically
import { LoadingBar } from 'react-redux-loading-bar' does not connect to the Redux store, and thus won't react to dispatched actions

[rahul3883]

Default import works. Thanks @mironov

[ProIcons]

Yeah that was the problem :)

[Dani-Boy92]

Sorry for the late reponse. @mironov diagnosed the problem. There was an issue with the import. Thanks for your support. I will close the issue.