feat(payment): PAYPAL-4692 fixed credit card loading glitch

[andriiVitvitskyi1990]

What?

Fixed credit card loading glitch

Why?

To fix bug

Testing / Proof

Before

Screen.Recording.2024-12-09.at.13.23.23.mov

After

Screen.Recording.2024-12-09.at.13.25.31.mov

@bigcommerce/team-checkout

[bc-nick]

Did you try how it will be working with process.nextTick()?

[andriiVitvitskyi1990]

It did not work, the problem is we need to wait until initializePayment finish and then check loading overlay, but in test we have updated isLoading prop after we get LoadingOverlay component because of initializePayment async. So i've used setTimeout to rearrange call stack

[bc-nick]

This comment must be here: #2120 (comment)

[bc-nick]

Thanks for explanation. Than you can try to do something like this. It should be work because after nextTick we update component and try checking the loadingOverlay's isLoading prop with a new updated value

Suggested change

	setTimeout(() => {
	await new Promise((resolve) => process.nextTick(resolve));
	component.update();
	const loadingOverlay = component.find(LoadingOverlay);
	expect(loadingOverlay.prop('isLoading')).toBe(false);

[andriiVitvitskyi1990]

fixed

[animesh1987]

This component is used by a quite a few providers, have you tested if the other providers work fine?

[andriiVitvitskyi1990]

This state sets to false whenever any of providers finish initialization, so should work fine for any provider that uses this component. I've checked PaypalCommerce and Braintree

[animesh1987]

Can you please test WP access and Hosted credit card as well. Thanks.

[andriiVitvitskyi1990]

What do you mean by WP access? Could you explain please

[andriiVitvitskyi1990]

@animesh1987 I've tested PaypalCommerce, Braintree and regular Credit Card with no provider onboarded