loadingIndicator.js

function loadingIndicator() {
  return Component => {
    return class LodingIndicator extends React.Container {
      // static displayName =
      constructor() {
        super();
        this.state = {
          counters: {},
        };
      }
      
      inc(key) {
        this.setState({
          counters: Object.assign({}, this.state.counters, {
            [key]: (this.state.counters[key] || 0) + 1,
          }),
        });
      }
      
      dec(key) {
        this.setState({
          counters: Object.assign({}, this.state.counters, {
            [key]: this.state.counters[key] - 1,
          }),
        });
      }
      
      async run(key, cb) {
        this.inc(key);
        try {
          await cb();
          this.dec(key);
        } catch {
          this.dec(key);
        }
      }
      
      render() {
        const loading = Object.keys(this.state.counters)
          .reduce((acc, key) => {
            acc[key] = this.state.counters[key] > 0;
            return acc;
          }, {});
        
        return (
          <Component
            {...this.props}
            loading={loading}
            run={(key, cb) => this.run(key, cb)}
          />
        );
      }
    };
  };
}