Update `filter by stock` skeleton design (https://github.com/woocommerce/woocommerce-blocks/pull/6996)

* Update filter by stock skeleton design

* Show skeleton only when is loading, otherwise it will show the loading state also after clicking on an option

plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.tsx

@@ -26,6 +26,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { isBoolean, objectHasProp } from '@woocommerce/types';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { changeUrl, PREFIX_QUERY_ARG_FILTER_TYPE } from '@woocommerce/utils';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -339,14 +340,11 @@ const StockStatusFilterBlock = ( {
 		[ checked, displayedOptions ]
 	);
 
-	if ( displayedOptions.length === 0 ) {
-		return null;
-	}
-
 	const TagName =
 		`h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements;
 	const isLoading =
-		! blockAttributes.isPreview && ! STOCK_STATUS_OPTIONS.current;
+		( ! blockAttributes.isPreview && ! STOCK_STATUS_OPTIONS.current ) ||
+		displayedOptions.length === 0;
 	const isDisabled = ! blockAttributes.isPreview && filteredCountsLoading;
 
 	const hasFilterableProducts = getSettingWithCoercion(
@@ -362,11 +360,19 @@ const StockStatusFilterBlock = ( {
 	return (
 		<>
 			{ ! isEditor && blockAttributes.heading && (
-				<TagName className="wc-block-stock-filter__title">
+				<TagName
+					className={ classnames( 'wc-block-stock-filter__title', {
+						'show-loading-state': isLoading,
+					} ) }
+				>
 					{ blockAttributes.heading }
 				</TagName>
 			) }
-			<div className="wc-block-stock-filter">
+			<div
+				className={ classnames( 'wc-block-stock-filter', {
+					'show-loading-state': isLoading,
+				} ) }
+			>
 				<CheckboxList
 					className={ 'wc-block-stock-filter-list' }
 					options={ displayedOptions }
@@ -375,6 +381,7 @@ const StockStatusFilterBlock = ( {
 					isLoading={ isLoading }
 					isDisabled={ isDisabled }
 				/>
+				{ ! isLoading && (
 					<div className="wc-block-stock-filter__actions">
 						{ checked.length > 0 && (
 							<FilterResetButton
@@ -396,6 +403,7 @@ const StockStatusFilterBlock = ( {
 							/>
 						) }
 					</div>
+				) }
 			</div>
 		</>
 	);

plugins/woocommerce-blocks/assets/js/blocks/stock-filter/style.scss

@@ -9,7 +9,23 @@
 	}
 }
 
+.wc-block-stock-filter__title {
+	&.show-loading-state {
+		@include placeholder();
+		background-color: $gray-400 !important;
+		border-radius: em(26px);
+		box-shadow: none;
+		width: max-content;
+	}
+}
+
 .wc-block-stock-filter {
+	&.show-loading-state {
+		@include placeholder();
+		box-shadow: none;
+		border-radius: em(4px) !important;
+	}
+
 	margin-bottom: $gap-large;
 
 	.wc-block-stock-filter-list {