UX issue during INITIALIZE callbackTrigger

Describe the bug

Hi everyone, thanks for this React button implementation! I have an UX issue that produce error on during my Google Pay payment process. It is due to the fact that in handler onPaymentDataChanged with callbackTrigger === 'INITIALIZE', there is no loader displayed. For other callbackTrigger params, the loader is displayed. Due to the absence of loader + grey overlay, users can click on button “Pay” even if the Promise returned is not resolved (required because I have to fetch data from my backend: price, shipment options, etc.)

To Reproduce

1. Use following onPaymentDataChange:

onPaymentDataChanged={({ callbackTrigger }) => {
  console.log('start:', callbackTrigger);
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      resolve({});
      console.log('end:', callbackTrigger);
    }, 2000),
  );
}}

1. Click on Google Pay button: there is no loader
2. Trigger a call to this handler (change address for example): there is a loader

Expected behavior A clear and concise description of what you expected to happen. Display loader while callback with callbackTrigger === 'INITIALIZE' Promise is not resolved, to block interaction with Google Pay popup.

Screenshots If applicable, add screenshots to help explain your problem.

Component information:

• Component
  • React component (@google-pay/button-react)
  • Custom element (@google-pay/button-element)
  • Angular component (@google-pay/button-angular)
• Component version (e.g. 1.0.0):

Environment:

• Device (e.g. iPhone6): Desktop (Asus UX430U)
• OS (e.g. iOS8.1): Ubuntu 21.04
• Browser (e.g. stock browser, safari): Firefox, Chromium
• Country/region: FR

Additional context Add any other context about the problem here.

[socsieng]

Thanks for reporting the issue. Will look into it.

[socsieng]

Closing due to inactivity.