initial commit

packages/woocommerce-blocks/assets/js/base/components/loading-mask/index.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Spinner from '../spinner';
+
+// @todo Find a way to block buttons/form components when LoadingMask isLoading
+const LoadingMask = ( {
+	children,
+	className,
+	screenReaderLabel,
+	showSpinner = false,
+	isLoading = true,
+} ) => {
+	return (
+		<div
+			className={ classNames( className, {
+				'wc-block-components-loading-mask': isLoading,
+			} ) }
+		>
+			{ isLoading && showSpinner && <Spinner /> }
+			<div
+				className={ classNames( {
+					'wc-block-components-loading-mask__children': isLoading,
+				} ) }
+				aria-hidden={ isLoading }
+			>
+				{ children }
+			</div>
+			{ isLoading && (
+				<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;

packages/woocommerce-blocks/assets/js/base/components/loading-mask/style.scss

@@ -0,0 +1,17 @@
+.wc-block-components-loading-mask {
+	position: relative;
+	min-height: 18px + $gap;
+	pointer-events: none;
+
+	.components-spinner {
+		position: absolute;
+		margin: 0;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.wc-block-components-loading-mask__children {
+		opacity: 0.25;
+	}
+}