AsyncBoundary.js

/**
 * @author Luke Brandon Farrell
 * @description
 */

/* NPM - Node Package Manage */
import React, { useState } from "react";
import PropTypes from "prop-types";

const AsyncBoundary = ({
  children,
  isEmpty = false,
  isLoading = false,
  isError = false,
  FallbackComponent = null,
  EmptyComponent = null,
  ErrorComponent = null,
  LoadingComponent = null
}) => {
  /*
   * Only show fallback component if isEmpty,
   * this is because we always want our data to
   * take priority over any loading / error states. 
   */
  if (isEmpty) {
    if (isError) {
      /*
      * If ErrorComponent and FallbackComponent
      * are not provided then we allow the component
      * to execute (do not return anything) as you
      * are probably providing a error / empty component
      * at a more granular level in a child AsyncBoundary
      */
      if (ErrorComponent || FallbackComponent)
        return ErrorComponent || FallbackComponent;
    } else if (isLoading) {
      return LoadingComponent;
    }

    if (EmptyComponent || FallbackComponent)
      return EmptyComponent || FallbackComponent;
  }

  return children;
};

AsyncBoundary.propTypes = {
  isEmpty: PropTypes.bool,
  isLoading: PropTypes.bool,
  isError: PropTypes.bool,
  FallbackComponent: PropTypes.element,
  EmptyComponent: PropTypes.element,
  ErrorComponent: PropTypes.element,
  LoadingComponent: PropTypes.element
};

export default AsyncBoundary;