loading bar not display

[tarim]

Hi,

I tried all of your description, but, the loading bar is not display. Do I need any css file or so? Please need your help.

Thanks,

[mironov]

No, there is no css files needed. All styles apply in an inline mode.
Could you share more info about your setup? Specifically, what promise middleware do you use (if any), what versions of react and redux, and anything that might be related.

Please take a look at the source code of the demo, it has a working example:
https://github.com/mironov/react-redux-loading-bar/tree/gh-pages/src

[tarim]

Hi @mironov ,

Thank you very much for your reply.

Here is my store js file

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducers';
import redThunk from 'redux-thunk';
import { loadingBarMiddleware } from 'react-redux-loading-bar';
import createLogger from 'redux-logger';
export default function configureStore(initialState) {
  const middlewares=[redThunk];
  if (process.env.NODE_ENV !== 'production') {
  const logger = createLogger();
  middlewares.push(logger);
}
  const finalCreateStore = compose(
    applyMiddleware(...middlewares,loadingBarMiddleware(),createLogger()),
   typeof window.devToolsExtension!=='undefined' && process.env.NODE_ENV !== 'production' ? window.devToolsExtension() : f => f
  )(createStore);
  const store = finalCreateStore(reducer, initialState);
  if (module.hot && process.env.NODE_ENV !== 'production') {
       module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers');
      store.replaceReducer(nextReducer);
    });
  }
  return store;
}

[tarim]

Hi @mironov ,

Here is my dependencies on package.json

"dependencies": {
"react-redux": "^4.4.5",
"react-redux-loading-bar": "^2.4.0",
"react-router": "^2.0.0-rc5",
"react-widgets": "^3.3.2",
"redux": "^3.5.2",
"redux-form": "^4.2.2",
"redux-logger": "^2.7.0",
"redux-thunk": "^2.0.1"
}

[mironov]

@tarim Have you mounted the Loading Bar itself?

You need to place it where you need it in the DOM:

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

export default class Header extends React.Component {
  render() {
    return (
      <header>
        <LoadingBar />
      </header>
    )
  }
}

[tarim]

Hi @mironov ,

Yes, I did. I have header file

import React, { Component } from 'react';
import LoadingBar from 'react-redux-loading-bar';
export default class Header extends Component {
    constructor() {
      super();
    }
    render() {
      return (
            <header id='header'>
            <div id='logo-group'>
                <span id='logo'>
                    <img src='../style/img/logo.png' // place your logo here
                         alt='SmartAdmin'/>
                </span>
            </div>
            <div className='pull-right'>

            </div>
            <LoadingBar />
        </header> );
    }
}

[mironov]

@tarim I don't see any promise middleware in your package.json. Do you use a custom middleware or you don't use it at all?

Loading Bar will not be shown until you tell it to show using showLoading() action. Could you confirm that the Loading Bar has mounted into the DOM? You can do that by inspecting the web page and looking for a div that has width, transition, opacity and other properties set via the style attribute.

[tarim]

Hi @mironov ,

I used Redux-Thunk, please check my dependencies.

Thank you,

[mironov]

@tarim Sorry it's taking so long. I'd appreciate it if you can make a quick repo that I can take a look into.

Please confirm that you're dispatching showLoading and hideLoading actions manually as outlined in Usage without middleware.

[markau]

Hey @mironov, sweet progress bar. I am experiencing a similar issue. Inspecting the DOM, I can see that the bar is on the page, but both the width and opacity remain at 0.

I am testing without middleware for simplicity. Therefore, following the docs, I am doing:

The <LoadingBar /> component is in my render() function

import LoadingBar from 'react-redux-loading-bar';
import { loadingBarReducer } from 'react-redux-loading-bar';
import { showLoading, hideLoading } from 'react-redux-loading-bar';

My combinereducers function includes:

loadingBar: loadingBarReducer,

And then in my actionCreator, where I am dispatching other actions:

dispatch(showLoading());

Nothing happens 😢

As I said, it's on the page, it's just not being updated.

[mironov]

Hey @markau, thank you!

Have you installed the loading bar reducer? Please take a look at this barebones example of the usage without middleware: https://github.com/mironov/react-redux-loading-bar-barebones-example

Required steps:

1. Mount the loading bar
2. Install reducer

That should make it.

[tarim]

Hi @mironov ,

I checked page DOM, and, the div tag is exist. but width is never change.
I believe I did exactly your document said.
Need your help.

Thank you.

<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>

[markau]

@mirinov you're right, I did not have the reducer in my combine reducers function. (I am sure I did at some stage!). Anyway, I'm pleased to confirm it's all working. Cheers.

[mironov]

@markau Awesome!

@tarim Could you check that Loading Bar's reducer is installed?

[tarim]

Hi @mironov ,

Yes, it is already installed to my reducer.

import { combineReducers } from 'redux';
import UserReducer from './user_reducer';
import ProfileReducer from './profile_reducer';
import AccountReducer from './account_reducer';
import CustomerReducer from './customer_reducer';
import InvoiceReducer from './invoice_reducer';
import AppReducer from './app_reducer';
import StatisticReducer from './statistic_reducer';
import {reducer as formReducer } from 'redux-form';
import { loadingBarReducer } from 'react-redux-loading-bar';
const rootReducer = combineReducers({
  form: formReducer,
  auth:AuthReducer,
  profile:ProfileReducer,
  account:AccountReducer,
  customer:CustomerReducer,
  user:UserReducer,
  invoice: InvoiceReducer,
  app:AppReducer,
  statistic:StatisticReducer,
  loadingBar:loadingBarReducer
});

export default rootReducer;

[tarim]

Hi @mironov ,

Any suggestion please?

Thanks,

[tarim]

Hi @mironov ,

I added redux-promise-middleware, but still no luck.

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducers';
import redThunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import { loadingBarMiddleware } from 'react-redux-loading-bar';
export default function configureStore(initialState) {
  const finalCreateStore = compose(
    applyMiddleware(redThunk,promiseMiddleware(),loadingBarMiddleware())  )(createStore);
  const store = finalCreateStore(reducer, initialState);
   return store;
}

[mironov]

@tarim Please copy here the code that invokes showLoading() action.

[tarim]

@mironov ,

I don't have any showLoading() action. I used middleware( because I don't like add show and hide action each action).

Thank you,

[tarim]

Hi @mironov ,

before I add your loading bar, I used http://milworm.github.io/react-progress-2/ . It is working fine. But, you have add show and hide to each actions. So, I decided use yours.

Thanks,

[mironov]

@tarim Oh that explains everything! Sorry, I should make it more clear in the readme.

The react-redux-loading-bar works automatically if you use some kind of promise middleware and perform for example xhr requests using that middleware. That middleware will dispatch _PENDING and _SUCCESS/_FAILURE actions that Loading Bar's middleware listen to.

If you don't want to use any promise middleware, you should dispatch showLoading/hideLoading actions yourself. There's no way to listen for global xhr pending/finish events, so there's no way to make the Loading Bar work 100% automatically.

Hope that clears things up.

[tarim]

@mironov ,

I got your point, but, I added promise middleware(because I don't like to add show hide to each actions). So, I don't know why, it still not show up. Or, did I missing something?

Thank you,

[mironov]

@tarim What action do you dispatch using the promise middleware?

[tarim]

@mironov ,

I changed my code, removed middleware, and added showLoading and hideLoading. But, it still not show up. Reducer part and header part not change at all.

Here is my code please have a look.

import axios from 'axios';
import { Promise } from 'es6-promise';
import { showLoading, hideLoading } from 'react-redux-loading-bar';
export function getUser() {

    return function (dispatch) {
        dispatch(showLoading());
        axios.get('/api/v1/Account/User').then(response => {
            dispatch(getUserSuccess(response));
        }).catch(err => {
            if (err.data) dispatch(authErrorSuccess(err.data.message));
            else toastr.error(err.message, 'System', { timeOut: 5000 });
        });
dispatch(hideLoading());
    }
}

[mironov]

@tarim That's probably because hideLoading is dispatched right after showLoading.

You might want to hide loading bar after response received:

import axios from 'axios';
import { Promise } from 'es6-promise';
import { showLoading, hideLoading } from 'react-redux-loading-bar';
export function getUser() {

    return function (dispatch) {
        dispatch(showLoading());
        axios.get('/api/v1/Account/User').then(response => {
            dispatch(getUserSuccess(response));
            dispatch(hideLoading());
        }).catch(err => {
            if (err.data) dispatch(authErrorSuccess(err.data.message));
            else toastr.error(err.message, 'System', { timeOut: 5000 });
            dispatch(hideLoading());
        });
    }
}

[tarim]

Hi @mironov ,

Thank you for your help. It is working now. But, it is almost same as my old one. Do you have any example with promise middleware please?

[mironov]

@tarim There is an example here:
https://github.com/mironov/react-redux-loading-bar/blob/gh-pages/src/reducers/photos.js#L7-L13

The idea is to return a fetch promise in your action and the promise middleware will dispatch PENDING and FINISHED actions for you.

[tarim]

Hi @mironov ,

It looks like not easy to implement on my application. Is there any possibility to handle with state data value?
For example: on reducer

import * as types from '../actions/actionTypes';
const INITIAL_STATE = {isLoading:false, all: [] };
export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
       case types.GET_USER:
    return {...state,**isLoading:true**,all:action.payload.data};
     case types.GET_USER_FINISH:
     return {...state,**isLoading:false**};
        default:    return state;
     }
}

So, the loding bar control by isLoading value. What do you think? Is that possible to this way??

Thanks,

[mironov]

@tarim Yes, it is possible to do so in a custom middleware.

Something like:

import { showLoading, hideLoading } from 'react-redux-loading-bar'

export default function loadingBarMiddleware(config = {}) {
  return ({ dispatch }) => next => action => {
    if (action.isLoading === true) {
      dispatch(showLoading())
    } else if (action.isLoading === false) {
      dispatch(hideLoading())
    }

    return next(action)
  }
}

It listens for all actions and dispatches showLoading/hideLoading when the isLoading flag is set on an action.

[mironov]

@tarim I'm going to close the issue as there's nothing to fix here. Feel free to re-open if you still experience the problem.

[tarim]

@mironov ,

Thank you very much for your help.

[muhsin-k]

Hi @mironov .Thanks for your awesome work.I am facing a small issue in my app.I have tried all of your soultions. but the loading bar is not displaying.These are the various files that am using,

store.js

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import {loadingBarMiddleware} from 'react-redux-loading-bar'
const configureStore = preloadedState => {
  const store = createStore(rootReducer, 
      preloadedState, 
      compose(applyMiddleware(thunk, loadingBarMiddleware), 
  ));
  return store;
}
export default configureStore;

reducers.js

import {combineReducers} from 'redux';
import {loadingBarReducer} from 'react-redux-loading-bar'
const rootReducer = combineReducers({loadingBar: loadingBarReducer});

export default rootReducer;

action.js

import {showLoading} from 'react-redux-loading-bar'
export const actions = {
  doSomeApiCall: () => (dispatch) => {
    dispatch(showLoading());
    setTimeout(() => {
      dispatch(increment());
      dispatch(hideLoading())
    }, 12000);
  }
};

app.js

import React, {Component} from "react";
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import LoadingBar from 'react-redux-loading-bar'
import Header from "./header/Header";
import Footer from "./footer/Footer";
import Routes from "./Routes";
import {actions} from '../store/action';

class App extends Component {
  componentDidMount() {
    this
      .props
      .doSomeApiCall();
  }
  render() {
    return (
      <div>
       <Header/>
        <LoadingBar/>
        <Routes/> 
        <Footer/>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({});

const mapDispatchToProps = (dispatch) => {
  return {
    doSomeApiCall: () => (dispatch(actions.doSomeApiCall()))
  }
};

App = withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
export default App;

Output

But when i inspect the browser.,i am able to see the component.But not able see the component in the app.What is missing here?
Please help me on this.

[mironov]

Hi @muhzi4u, the reducer is installed correctly but the middleware should be installed as loadingBarMiddleware() because it can accept additional configuration options.

However, the middleware is only needed if you use some kind of promise-middleware.
If you dispatch showLoading and hideLoading actions yourself, you can skip the middleware step.

That doesn't explain why the loading bar is hidden though.
Could you post a list of dispatched actions? You can obtain it with the redux-logger middleware or with the Redux Dev Tools.

[muhsin-k]

Hi @mironov .It is working after when i change loadingBarMiddleware to loadingBarMiddleware() in reducers.js.Thank you so much

[ARKKYN]

it is not working i did as mentioned