Skip to content

Instantly share code, notes, and snippets.

@lukebrandonfarrell
Last active October 29, 2019 01:28
Show Gist options
  • Save lukebrandonfarrell/bf3ad19f0009fa0e052209f926be2c53 to your computer and use it in GitHub Desktop.
Save lukebrandonfarrell/bf3ad19f0009fa0e052209f926be2c53 to your computer and use it in GitHub Desktop.
/**
* @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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment