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

Add loading spinner

Browse source
This commit is contained in:
Alex P 2023-12-05 21:35:41 +02:00
parent 9ded2bfa17
commit d8ff7f79e6
No known key found for this signature in database
GPG key ID: 54487A734A204D71
1 changed files with 6 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
modules/ppcp-paylater-block/resources/js/edit.js
View file

@ -1,12 +1,15 @@
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
export default function Edit( { attributes, setAttributes } ) {
const { layout, logo, position, color, flexColor, flexRatio } = attributes;
const isFlex = layout === 'flex';
const [loaded, setLoaded] = useState(false);
const previewStyle = {
layout,
logo: {
@ -102,10 +105,12 @@ export default function Edit( { attributes, setAttributes } ) {
<PayPalMessages
style={previewStyle}
forceReRender={[previewStyle]}
onRender={() => setLoaded(true)}
/>
</PayPalScriptProvider>
</div>
<div className={'ppcp-overlay-child ppcp-unclicable-overlay'}> {/* make the message not clickable */}
{!loaded && (<Spinner/>)}
</div>
</div>
</>