reactjs - async rendering of react components, how to set a global Loading component? -

i want render components after successful asynchronous call. before that, want show loading component improve user experience.

in 1 component, know how handle it, referring reactjs async rendering of components. in project, there many pages(components) displaying infos asynchronous call.

so there way set global loading component in place rather write internal state in every component?

maybe take hoc pattern in react: https://facebook.github.io/react/docs/higher-order-components.html

you that:

function withasynchronous(wrappedcomponent, url) {   return class extends react.component {     constructor(props) {       super(props);       this.state = {         isloading: true       };     }      componentdidmount() {       // async call       getasync(url, data => {         this.setstate({ isloading: false, data: data });       });     }      render() {       if (this.state.isloading) {         return (<yourloadingcomponent />);       }        return <wrappedcomponent data={this.state.data} {...this.props} />;     }   }; } 

and render that:

componentdidmount() {   const yourasyncpage = withasynchronous(     yourpage,     '/your/page/url'   ); }  render() {   return (<yourasyncpage />); }