Re-rendering Issues When Using Hoc For Loader

I am building an app where there is tons of pages and each page needs loader icon to show when the data is coming from server but has not arrived yet but no content is shown if the

Solution 1:

I did something super simple, and there is surely places to improve. But it solved the issues you wanted, if you have a flag of "loadedData" you show the data, if not you show a loader.

link to code: https://codepen.io/tzookb/pen/VWdeyE

code:

classSomeComponentextendsReact.Component {
  render() {
    return<div>Im a basic component</div>;
  }
}

functionwithLoader(WrappedComponent) {
  returnclassextendsReact.Component {
    render() {
      if (this.props.loadedData) {
        return<WrappedComponent {...this.props} />;        
      } else {
        return<h1>Loading...</h1>;
      }
    }
  };
}

letSomeComponentWithLoader = withLoader(SomeComponent);


ReactDOM.render(<SomeComponentWithLoaderloadedData={false} />, document.getElementById("app"));