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

Hide spinner on cart block's "Proceed to Checkout" link when page unloads (https://github.com/woocommerce/woocommerce-blocks/pull/3436) 

* Hide spinner on cart's "proceed to checkout" button when page unloads

This is required because of a feature of Safari where the page state is saved, including all class names, when a transition occurs. Navigating using the back button restores the page to that cached state, so the spinner class remains on the button. Resetting the state just before the page gets cached stops this from happening.

* Change comment case to sentence case.
This commit is contained in:
opr 2020-11-23 13:20:04 +00:00 committed by GitHub
parent fcfe5ee7dc
commit a7461de3b3
1 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/index.js
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useState, useEffect } from '@wordpress/element';
import { PaymentMethodIcons } from '@woocommerce/base-components/cart-checkout';
import Button from '@woocommerce/base-components/button';
import { CHECKOUT_URL } from '@woocommerce/block-settings';
@ -41,6 +41,30 @@ const CheckoutButton = ( { link } ) => {
const [ showSpinner, setShowSpinner ] = useState( false );
const { paymentMethods } = usePaymentMethods();
useEffect( () => {
// Add a listener for when the page is unloaded (specifically needed for Safari)
// to remove the spinner on the checkout button, so the saved page snapshot does not
// contain the spinner class. See https://archive.is/lOEW0 for why this is needed.
if (
! window ||
typeof window.addEventListener !== 'function' ||
typeof window.removeEventListener !== 'function'
) {
return;
}
const hideSpinner = () => {
setShowSpinner( false );
};
window.addEventListener( 'beforeunload', hideSpinner );
return () => {
window.removeEventListener( 'beforeunload', hideSpinner );
};
}, [] );
const submitContainerContents = (
<>
<Button