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

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