Active Filters Loading Placeholders (#7083)

* Active Filters Loading Placeholders

* Use flexbox for active filters loading placeholders

* Clear all placeholder loading styles

* Ensure active filters which arent attribute filters render null when in a loading state

* Refactor loading placeholders and state setting

* Add useIsMounted to shared hooks and check productAttributes only when mounted

* Add componentHasMounted to useMemo deps

* Check URL for attribute filter hint

* Check URL for attribute filter hint

* Remove border-radius from placeholder for clear all button

* Fix filter loading when no filters are active on shop page

Author: tjcafferkey

assets/js/base/hooks/index.js

@@ -8,3 +8,4 @@ export * from './use-spacing-props';
 export * from './use-typography-props';
 export * from './use-color-props';
 export * from './use-border-props';
+export * from './use-is-mounted';

assets/js/base/hooks/use-is-mounted.ts

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Returns a boolean value based on whether the current component has been mounted.
+ *
+ * @return {boolean} If the component has been mounted.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const isMounted = useIsMounted();
+ *
+ * 	if ( ! isMounted() ) {
+ * 	    return null;
+ * 	}
+ *
+ * 	return </div>;
+ * };
+ * ```
+ */
+
+export function useIsMounted() {
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		isMounted.current = true;
+
+		return () => {
+			isMounted.current = false;
+		};
+	}, [] );
+
+	return useCallback( () => isMounted.current, [] );
+}

assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { useEffect } from '@wordpress/element';
 import {
 	useCollection,
 	useQueryStateByKey,
@@ -26,22 +27,25 @@ interface ActiveAttributeFiltersProps {
 	operator: 'and' | 'in';
 	slugs: string[];
 	attributeObject: AttributeObject;
+	isLoadingCallback: ( val: boolean ) => void;
 }
 
 /**
  * Component that renders active attribute (terms) filters.
  *
- * @param {Object} props                 Incoming props for the component.
- * @param {Object} props.attributeObject The attribute object.
- * @param {Array}  props.slugs           The slugs for attributes.
- * @param {string} props.operator        The operator for the filter.
- * @param {string} props.displayStyle    The style used for displaying the filters.
+ * @param {Object} props                   Incoming props for the component.
+ * @param {Object} props.attributeObject   The attribute object.
+ * @param {Array}  props.slugs             The slugs for attributes.
+ * @param {string} props.operator          The operator for the filter.
+ * @param {string} props.displayStyle      The style used for displaying the filters.
+ * @param {string} props.isLoadingCallback The callback to trigger the loading complete state.
  */
 const ActiveAttributeFilters = ( {
 	attributeObject,
 	slugs = [],
 	operator = 'in',
 	displayStyle,
+	isLoadingCallback,
 }: ActiveAttributeFiltersProps ) => {
 	const { results, isLoading } = useCollection( {
 		namespace: '/wc/store/v1',
@@ -54,8 +58,11 @@ const ActiveAttributeFilters = ( {
 		[]
 	);
 
+	useEffect( () => {
+		isLoadingCallback( isLoading );
+	}, [ isLoading, isLoadingCallback ] );
+
 	if (
-		isLoading ||
 		! Array.isArray( results ) ||
 		! isAttributeTermCollection( results ) ||
 		! isAttributeQueryCollection( productAttributes )
@@ -100,6 +107,7 @@ const ActiveAttributeFilters = ( {
 						type: attributeLabel,
 						name: decodeEntities( termObject.name || slug ),
 						prefix,
+						isLoading,
 						removeCallback: () => {
 							const currentAttribute = productAttributes.find(
 								( { attribute } ) =>

assets/js/blocks/active-filters/block.tsx

@@ -4,7 +4,7 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
 import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useEffect, useState } from '@wordpress/element';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Label from '@woocommerce/base-components/label';
@@ -16,6 +16,8 @@ import {
 	isStockStatusOptions,
 } from '@woocommerce/types';
 import { getUrlParameter } from '@woocommerce/utils';
+import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder';
+import { useIsMounted } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -27,8 +29,11 @@ import {
 	renderRemovableListItem,
 	removeArgsFromFilterUrl,
 	cleanFilterUrl,
+	maybeUrlContainsFilters,
+	urlContainsAttributeFilter,
 } from './utils';
 import ActiveAttributeFilters from './active-attribute-filters';
+import FilterPlaceholders from './filter-placeholders';
 import { Attributes } from './types';
 
 /**
@@ -45,11 +50,20 @@ const ActiveFiltersBlock = ( {
 	attributes: Attributes;
 	isEditor?: boolean;
 } ) => {
+	const isMounted = useIsMounted();
+	const componentHasMounted = isMounted();
 	const filteringForPhpTemplate = getSettingWithCoercion(
 		'is_rendering_php_template',
 		false,
 		isBoolean
 	);
+	const [ isLoading, setIsLoading ] = useState( true );
+	/*
+		activeAttributeFilters is the only async query in this block. Because of this the rest of the filters will render null
+		when in a loading state and activeAttributeFilters renders the placeholders.
+	 */
+	const shouldShowLoadingPlaceholders =
+		maybeUrlContainsFilters() && ! isEditor && isLoading;
 	const [ productAttributes, setProductAttributes ] = useQueryStateByKey(
 		'attributes',
 		[]
@@ -62,8 +76,10 @@ const ActiveFiltersBlock = ( {
 	const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' );
 
 	const STOCK_STATUS_OPTIONS = getSetting( 'stockStatusOptions', [] );
+	const STORE_ATTRIBUTES = getSetting( 'attributes', [] );
 	const activeStockStatusFilters = useMemo( () => {
 		if (
+			shouldShowLoadingPlaceholders ||
 			productStockStatus.length === 0 ||
 			! isStockStatusQueryCollection( productStockStatus ) ||
 			! isStockStatusOptions( STOCK_STATUS_OPTIONS )
@@ -92,6 +108,7 @@ const ActiveFiltersBlock = ( {
 			} );
 		} );
 	}, [
+		shouldShowLoadingPlaceholders,
 		STOCK_STATUS_OPTIONS,
 		productStockStatus,
 		setProductStockStatus,
@@ -100,7 +117,10 @@ const ActiveFiltersBlock = ( {
 	] );
 
 	const activePriceFilters = useMemo( () => {
-		if ( ! Number.isFinite( minPrice ) && ! Number.isFinite( maxPrice ) ) {
+		if (
+			shouldShowLoadingPlaceholders ||
+			( ! Number.isFinite( minPrice ) && ! Number.isFinite( maxPrice ) )
+		) {
 			return null;
 		}
 		return renderRemovableListItem( {
@@ -116,6 +136,7 @@ const ActiveFiltersBlock = ( {
 			displayStyle: blockAttributes.displayStyle,
 		} );
 	}, [
+		shouldShowLoadingPlaceholders,
 		minPrice,
 		maxPrice,
 		blockAttributes.displayStyle,
@@ -125,7 +146,13 @@ const ActiveFiltersBlock = ( {
 	] );
 
 	const activeAttributeFilters = useMemo( () => {
-		if ( ! isAttributeQueryCollection( productAttributes ) ) {
+		if (
+			( ! isAttributeQueryCollection( productAttributes ) &&
+				componentHasMounted ) ||
+			( ! productAttributes.length &&
+				! urlContainsAttributeFilter( STORE_ATTRIBUTES ) )
+		) {
+			setIsLoading( false );
 			return null;
 		}
 
@@ -135,6 +162,7 @@ const ActiveFiltersBlock = ( {
 			);
 
 			if ( ! attributeObject ) {
+				setIsLoading( false );
 				return null;
 			}
 
@@ -145,10 +173,16 @@ const ActiveFiltersBlock = ( {
 					slugs={ attribute.slug }
 					key={ attribute.attribute }
 					operator={ attribute.operator }
+					isLoadingCallback={ setIsLoading }
 				/>
 			);
 		} );
-	}, [ productAttributes, blockAttributes.displayStyle ] );
+	}, [
+		componentHasMounted,
+		setIsLoading,
+		productAttributes,
+		blockAttributes.displayStyle,
+	] );
 
 	const [ productRatings, setProductRatings ] =
 		useQueryStateByKey( 'ratings' );
@@ -177,6 +211,7 @@ const ActiveFiltersBlock = ( {
 
 	const activeRatingFilters = useMemo( () => {
 		if (
+			shouldShowLoadingPlaceholders ||
 			productRatings.length === 0 ||
 			! isRatingQueryCollection( productRatings )
 		) {
@@ -206,6 +241,7 @@ const ActiveFiltersBlock = ( {
 			} );
 		} );
 	}, [
+		shouldShowLoadingPlaceholders,
 		productRatings,
 		setProductRatings,
 		blockAttributes.displayStyle,
@@ -222,12 +258,25 @@ const ActiveFiltersBlock = ( {
 		);
 	};
 
-	if ( ! hasFilters() && ! isEditor ) {
+	if ( ! shouldShowLoadingPlaceholders && ! hasFilters() && ! isEditor ) {
 		return null;
 	}
 
 	const TagName =
 		`h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements;
+
+	const heading = (
+		<TagName className="wc-block-active-filters__title">
+			{ blockAttributes.heading }
+		</TagName>
+	);
+
+	const filterHeading = shouldShowLoadingPlaceholders ? (
+		<FilterTitlePlaceholder>{ heading }</FilterTitlePlaceholder>
+	) : (
+		heading
+	);
+
 	const hasFilterableProducts = getSettingWithCoercion(
 		'has_filterable_products',
 		false,
@@ -241,15 +290,12 @@ const ActiveFiltersBlock = ( {
 	const listClasses = classnames( 'wc-block-active-filters__list', {
 		'wc-block-active-filters__list--chips':
 			blockAttributes.displayStyle === 'chips',
+		'wc-block-active-filters--loading': shouldShowLoadingPlaceholders,
 	} );
 
 	return (
 		<>
-			{ ! isEditor && blockAttributes.heading && (
-				<TagName className="wc-block-active-filters__title">
-					{ blockAttributes.heading }
-				</TagName>
-			) }
+			{ ! isEditor && blockAttributes.heading && filterHeading }
 			<div className="wc-block-active-filters">
 				<ul className={ listClasses }>
 					{ isEditor ? (
@@ -279,36 +325,44 @@ const ActiveFiltersBlock = ( {
 						</>
 					) : (
 						<>
+							<FilterPlaceholders
+								isLoading={ shouldShowLoadingPlaceholders }
+								displayStyle={ blockAttributes.displayStyle }
+							/>
 							{ activePriceFilters }
 							{ activeStockStatusFilters }
 							{ activeAttributeFilters }
 							{ activeRatingFilters }
 						</>
 					) }
 				</ul>
-				<button
-					className="wc-block-active-filters__clear-all"
-					onClick={ () => {
-						cleanFilterUrl();
-						if ( ! filteringForPhpTemplate ) {
-							setMinPrice( undefined );
-							setMaxPrice( undefined );
-							setProductAttributes( [] );
-							setProductStockStatus( [] );
-						}
-					} }
-				>
-					<Label
-						label={ __(
-							'Clear All',
-							'woo-gutenberg-products-block'
-						) }
-						screenReaderLabel={ __(
-							'Clear All Filters',
-							'woo-gutenberg-products-block'
-						) }
-					/>
-				</button>
+				{ shouldShowLoadingPlaceholders ? (
+					<span className="wc-block-active-filters__clear-all-placeholder" />
+				) : (
+					<button
+						className="wc-block-active-filters__clear-all"
+						onClick={ () => {
+							cleanFilterUrl();
+							if ( ! filteringForPhpTemplate ) {
+								setMinPrice( undefined );
+								setMaxPrice( undefined );
+								setProductAttributes( [] );
+								setProductStockStatus( [] );
+							}
+						} }
+					>
+						<Label
+							label={ __(
+								'Clear All',
+								'woo-gutenberg-products-block'
+							) }
+							screenReaderLabel={ __(
+								'Clear All Filters',
+								'woo-gutenberg-products-block'
+							) }
+						/>
+					</button>
+				) }
 			</div>
 		</>
 	);

assets/js/blocks/active-filters/filter-placeholders.tsx

@@ -0,0 +1,30 @@
+const FilterPlaceholders = ( {
+	displayStyle,
+	isLoading,
+}: {
+	isLoading: boolean;
+	displayStyle: string;
+} ) => {
+	if ( ! isLoading ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ [ ...Array( displayStyle === 'list' ? 2 : 3 ) ].map( ( x, i ) => (
+				<li
+					className={
+						displayStyle === 'list'
+							? 'show-loading-state-list'
+							: 'show-loading-state-chips'
+					}
+					key={ i }
+				>
+					<span className="show-loading-state__inner" />
+				</li>
+			) ) }
+		</>
+	);
+};
+
+export default FilterPlaceholders;