Loading enhancer Higher-order Component

LoadingEnhancer.js

import React from 'react';

export default function(LoadingComponent, WrappedComponent) {
  return function(props) {
    return (
      {
        (props.status === 'LOADING') ? <LoadingComponent /> : <WrappedComponent {...props.data} />
      }
    )
  };
};

WrappedComponent.js

import React from 'react';

import LoadingEnhancer from './LoadingEnhancer';
import LoadingComponent from './YourLoadingComponent';

/* 
 * "Spread" in an object with the following shape:

  {
    status: ['LOADING', 'READY', etc],
    data: {} or []
  }
  
   Or pass the 'status' and 'data' props individually
   depending on your data structure
*/

export default LoadingEnhancer(LoadingComponent, WrappedComponent);

function WrappedComponent() {
  return (
    //...
  );
}