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

Merge pull request #3071 from woocommerce/PCP-4151-better-style-for-the-loader-esp-during-onboarding

Browse source 
Better style for the loader (4151)
This commit is contained in:
Philipp Stracker 2025-02-07 17:02:16 +01:00 • committed by GitHub
commit ab363b9619
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 28 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/ppcp-settings/resources/js/Components/App.js
View file

@ -38,7 +38,7 @@ const SettingsApp = () => {
const Content = useMemo( () => {
if ( ! onboardingIsReady || ! merchantIsReady ) {
return <SpinnerOverlay />;
return <SpinnerOverlay asModal={ true } />;
}
if ( isSendOnlyCountry ) {

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/BusyStateWrapper.js
View file

@ -60,7 +60,9 @@ const BusyStateWrapper = ( {
return (
<BusyContext.Provider value={ isBusyComponent }>
<div className={ wrapperClassName }>
{ showSpinner && <SpinnerOverlay /> }
{ showSpinner && (
<SpinnerOverlay asModal={ false } message="" />
) }
{ memoizedChildren }
</div>
</BusyContext.Provider>

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

@ -1,13 +1,18 @@
import { __ } from '@wordpress/i18n';
import { Spinner } from '@wordpress/components';
import classnames from 'classnames';
const SpinnerOverlay = ( { asModal = false, message = null } ) => {
const className = classnames( 'ppcp-r-spinner-overlay', {
'ppcp--is-modal': asModal,
} );
const SpinnerOverlay = ( { message = null } ) => {
if ( null === message ) {
message = __( 'Loading…', 'woocommerce-paypal-payments' );
}
return (
<div className="ppcp-r-spinner-overlay">
<div className={ className }>
{ message && (
<span className="ppcp--spinner-message">{ message }</span>
) }

2
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabSettings.js
View file

@ -8,7 +8,7 @@ const TabSettings = () => {
const { isReady } = SettingsHooks.useStore();
if ( ! isReady ) {
return <SpinnerOverlay />;
return <SpinnerOverlay asModal={ true } />;
}
return (

2
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabStyling.js
View file

@ -8,7 +8,7 @@ const TabStyling = () => {
const { location, setLocation } = StylingHooks.useStylingLocation();
if ( ! isReady ) {
return <SpinnerOverlay />;
return <SpinnerOverlay asModal={ true } />;
}
return (