Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Alba Rincón 2022-08-30 09:32:30 +02:00 committed by GitHub
parent d6d94ae622
commit 1e488287ed
2 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,27 +381,29 @@ const StockStatusFilterBlock = ( {
isLoading={ isLoading }
isDisabled={ isDisabled }
/>
<div className="wc-block-stock-filter__actions">
{ checked.length > 0 && (
<FilterResetButton
onClick={ () => {
setChecked( [] );
onSubmit( [] );
} }
screenReaderLabel={ __(
'Reset stock filter',
'woo-gutenberg-products-block'
) }
/>
) }
{ blockAttributes.showFilterButton && (
<FilterSubmitButton
className="wc-block-stock-filter__button"
disabled={ isLoading || isDisabled }
onClick={ () => onSubmit( checked ) }
/>
) }
</div>
{ ! isLoading && (
<div className="wc-block-stock-filter__actions">
{ checked.length > 0 && (
<FilterResetButton
onClick={ () => {
setChecked( [] );
onSubmit( [] );
} }
screenReaderLabel={ __(
'Reset stock filter',
'woo-gutenberg-products-block'
) }
/>
) }
{ blockAttributes.showFilterButton && (
<FilterSubmitButton
className="wc-block-stock-filter__button"
disabled={ isLoading || isDisabled }
onClick={ () => onSubmit( checked ) }
/>
) }
</div>
) }
</div>
</>
);

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

@ -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 {