[Feature] Helper text on loading screen for async operations

[xt-riot]

🚀 Feature Proposal

Currently, when there's an async operation in the onClick or createOrder hooks, the PayPal modal opens up with a loading spinner. Whenever there is an error(ie, async validation got rejected), the modal is closed instantly.

The proposal is two-fold:

1. Add a new Button prop (maybe called loadingMessage) which will show a merchant-supplied message back to the customer while the asynchronous operation is ongoing. If there is no such message, show the current modal(no default message), otherwise show the message to the customer. The message can be limited to a certain length.
2. Close the modal after X(2? 5?) amount of seconds to give enough time for a user to see the message.
3. A v2 of this proposal can also include another prop (maybe called onClickErrorMessage) which will update the initial merchant message to an error message.

Motivation

The current browser(namely, ad detection) limitations do not allow the modal to be opened up after any onClick asynchronous validation/job has resolved; it has to be opened instantly. That also means, that instantly closing the modal looks unprofessional. This has been reported multiple times, with the latest issue(AFAIK) being #559.

The motivation behind this proposal is to give developers a "way out" and to allow for a better UX experience. Messages like that will help customers better understand what is going on. Whenever a modal closes, the customer will have a better understanding on why their action might have failed and what has happened instead of just seeing a modal appear and disappear almost instantly.

The second part of the proposal also gives the opportunity to mitigate the modal bleeping in and out of screen instantaneously.

Example

The following image is a standalone html page which was built on top of the current loading spinner taken from the popup.