So I'd like to implement a loading bar just like github has. It should start loading on a click to another page and finish when it arrived.

I'm using material-ui and for the loader react-progress-bar-plus.

I tried to use react-router's lifecycle hooks, namely ponentDidUpdate and ponentWillReceiveProps to set the state to be finished.

For start, I attached an onTouchTap function to the menu items but it just does not want to work properly.

What is the best way to implement this feature?

So I'd like to implement a loading bar just like github has. It should start loading on a click to another page and finish when it arrived.

I'm using material-ui and for the loader react-progress-bar-plus.

I tried to use react-router's lifecycle hooks, namely ponentDidUpdate and ponentWillReceiveProps to set the state to be finished.

For start, I attached an onTouchTap function to the menu items but it just does not want to work properly.

What is the best way to implement this feature?

• javascript
• reactjs
• react-router
• material-ui

2 Answers 2

You can use router-resolver with react-progress-bar-plus. See this example: http://minhtranite.github.io/router-resolver/ex-4

The usage example:

// app.js
//...
import {RouterResolver} from 'router-resolver';
//...
const routes = {
  path: '/',
  ponent: App,
  indexRoute: {
    ponent: require('ponents/pages/PageHome')
  },
  childRoutes: [
    require('./routes/Example1Route'),
    require('./routes/Example2Route'),
    require('./routes/Example3Route')
  ]
};

const renderInitial = () => {
  return <div>Loading...</div>;
};

const onError = (error) => {
  console.log('Error: ', error);
};

ReactDOM.render(
  <Router routes={routes}
    history={history}
    render={props => (
      <RouterResolver {...props} renderInitial={renderInitial} onError={onError}/>
    )}/>,
  document.getElementById('app')
);

And:

// ponents/pages/PageExample1.js
import React from 'react';
import Document from 'ponents/mon/Document';

class PageExample1 extends React.Component {
  static resolve() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('simple data');
      }, 2000);
    });
  };

  static propTypes = {
    response: React.PropTypes.string.isRequired
  };

  render() {
    return (
      <Document title='Example1 | Router resolver' className='page-ex-1'>
        <h1>Example 1: {this.props.response}</h1>
      </Document>
    );
  }
}

export default PageExample1;

I made a small package react-router-loading that allows you to show loading indicator and fetch some data before switching the screen.

Just use Switch and Route from this package instead of react-router-dom:

import { Switch, Route } from "react-router-loading";

Add loading props to the Route where you want to wait something:

<Route path="/my-ponent" ponent={MyComponent} loading/>

And then somewhere at the end of fetch logic in MyComponent add loadingContext.done();:

import { LoadingContext } from "react-router-loading";
const loadingContext = useContext(LoadingContext);

const loading = async () => {
    //fetching some data

    //call method to indicate that fetching is done and we are ready to switch
    loadingContext.done();
};