React's Higher-Order Component to show a Semantic-UI-React Loading spinner

withLoader.js

import React, { Component } from 'react';
import { Loader } from 'semantic-ui-react';

const withLoader = (WrappedComponent, dataProps) => (
  class LoaderHOC extends Component {
    render() {
      const prop = this.props[dataProps];
      return (!prop || Object.keys(prop).length === 0)
        ? <Loader active />
        : <WrappedComponent {...this.props} />;
    }
  }
);

export default withLoader;

Usage:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class ContactCard extends Component {

  static propTypes = {
    person: PropTypes.object.isRequired;
  }

  render() {
    const { name, lastName } = this.props.person;

    return (
      <div>{lastName}</div>
      <div>{name}</div>
    )
  }

}

export default withLoader(ContactCard, 'person');