woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

💄 Enhance SettingsToggleBlock with loading state

Browse source
This commit is contained in:
Philipp Stracker 2024-11-07 13:24:29 +01:00
parent 4af29a5dc2
commit d9a82948f7
No known key found for this signature in database
2 changed files with 14 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
modules/ppcp-settings/resources/css/components/reusable-components/_settings-toggle-block.scss
View file

@ -1,4 +1,6 @@
.ppcp-r-toggle-block {
position: relative;
&__wrapper {
display: flex;
width: 100%;
@ -29,4 +31,10 @@
&__toggled-content {
margin-top: 24px;
}
&.ppcp--is-loading {
pointer-events: none;
--spinner-overlay-color: #fff4;
}
}

9
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
View file

@ -1,6 +1,8 @@
import { ToggleControl, Spinner } from '@wordpress/components';
import { ToggleControl } from '@wordpress/components';
import { useRef } from '@wordpress/element';
import SpinnerOverlay from './SpinnerOverlay';
const SettingsToggleBlock = ( {
isToggled,
setToggled,
@ -15,9 +17,10 @@ const SettingsToggleBlock = ( {
}
const handleLabelClick = () => {
if ( ! toggleRef.current ) {
if ( ! toggleRef.current || isLoading ) {
return;
}
toggleRef.current.click();
toggleRef.current.focus();
};
@ -55,7 +58,7 @@ const SettingsToggleBlock = ( {
</div>
{ props.children && isToggled && (
<div className="ppcp-r-toggle-block__toggled-content">
{ isLoading && <Spinner /> }
{ isLoading && <SpinnerOverlay /> }
{ props.children }
</div>
) }