diff --git a/assets/js/base/components/loading-mask/index.js b/assets/js/base/components/loading-mask/index.js
index 0c86a8752d1..1a9ec056b1f 100644
--- a/assets/js/base/components/loading-mask/index.js
+++ b/assets/js/base/components/loading-mask/index.js
@@ -20,17 +20,15 @@ const LoadingMask = ( {
 } ) => {
 	return (
 		<div
-			className={ classNames(
-				className,
-				'wc-block-components-loading-mask',
-				{
-					'is-loading': isLoading,
-				}
-			) }
+			className={ classNames( className, {
+				'wc-block-components-loading-mask': isLoading,
+			} ) }
 		>
 			{ isLoading && showSpinner && <Spinner /> }
 			<div
-				className="wc-block-components-loading-mask__children"
+				className={ classNames( {
+					'wc-block-components-loading-mask__children': isLoading,
+				} ) }
 				aria-hidden={ isLoading }
 			>
 				{ children }
diff --git a/assets/js/base/components/loading-mask/style.scss b/assets/js/base/components/loading-mask/style.scss
index 66bab5f46c8..4d07b98409f 100644
--- a/assets/js/base/components/loading-mask/style.scss
+++ b/assets/js/base/components/loading-mask/style.scss
@@ -1,4 +1,4 @@
-.wc-block-components-loading-mask.is-loading {
+.wc-block-components-loading-mask {
 	position: relative;
 	min-height: 18px + $gap;
 	pointer-events: none;