/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Spinner } from 'wordpress-components';
/**
* Internal dependencies
*/
import './style.scss';
const LoadingMask = ( {
children,
className,
screenReaderLabel,
showSpinner = false,
isLoading = true,
} ) => {
// If nothing is loading, just pass through the children.
if ( ! isLoading ) {
return children;
}
return (
<div
className={ classNames(
className,
'wc-block-components-loading-mask'
) }
>
{ showSpinner && <Spinner /> }
<div
className="wc-block-components-loading-mask__children"
aria-hidden={ true }
>
{ children }
</div>
<span className="screen-reader-text">
{ screenReaderLabel ||
__( 'Loading…', 'woocommerce' ) }
</span>
</div>
);
};
LoadingMask.propTypes = {
className: PropTypes.string,
screenReaderLabel: PropTypes.string,
showSpinner: PropTypes.bool,
isLoading: PropTypes.bool,
};
export default LoadingMask;