Product Categories List: add a placeholder on save (#650)

* Product Categories List: add a placeholder on save

This is saved to the database so that we have a placeholder view while waiting for the categories component to render.

* Use `classList.remove` for better readability

Co-Authored-By: Albert Juhé Lluveras <[email protected]>

Author: ryelle

assets/js/blocks/product-categories/frontend.js

@@ -22,6 +22,7 @@ if ( containers.length ) {
 			isDropdown: data.isDropdown === 'true',
 			isHierarchical: data.isHierarchical === 'true',
 		};
+		el.classList.remove( 'is-loading' );
 
 		render( <Block attributes={ attributes } />, el );
 	} );

assets/js/blocks/product-categories/index.js

@@ -81,19 +81,31 @@ registerBlockType( 'woocommerce/product-categories', {
 	 */
 	save( { attributes } ) {
 		const { hasCount, hasEmpty, isDropdown, isHierarchical } = attributes;
-		const props = {};
+		const data = {};
 		if ( hasCount ) {
-			props[ 'data-has-count' ] = true;
+			data[ 'data-has-count' ] = true;
 		}
 		if ( hasEmpty ) {
-			props[ 'data-has-empty' ] = true;
+			data[ 'data-has-empty' ] = true;
 		}
 		if ( isDropdown ) {
-			props[ 'data-is-dropdown' ] = true;
+			data[ 'data-is-dropdown' ] = true;
 		}
 		if ( isHierarchical ) {
-			props[ 'data-is-hierarchical' ] = true;
+			data[ 'data-is-hierarchical' ] = true;
 		}
-		return <div { ...props }>LOADING</div>;
+		return (
+			<div className="is-loading" { ...data }>
+				{ isDropdown ? (
+					<span aria-hidden className="wc-block-product-categories__placeholder" />
+				) : (
+					<ul aria-hidden>
+						<li><span className="wc-block-product-categories__placeholder" /></li>
+						<li><span className="wc-block-product-categories__placeholder" /></li>
+						<li><span className="wc-block-product-categories__placeholder" /></li>
+					</ul>
+				) }
+			</div>
+		);
 	},
 } );

assets/js/blocks/product-categories/style.scss

@@ -9,3 +9,12 @@
 		margin-right: 0.5em;
 	}
 }
+
+.wp-block-woocommerce-product-categories.is-loading .wc-block-product-categories__placeholder {
+	display: inline-block;
+	height: 1em;
+	width: 50%;
+	min-width: 200px;
+	background: currentColor;
+	opacity: 0.2;
+}