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

Merge pull request #3577 from woocommerce/PCP-4990

Browse source 
Add polling mechanism for renderer wrapper (4990)
This commit is contained in:
Niklas Gutberlet 2025-08-04 19:41:27 +02:00 • committed by GitHub
commit f42721fc86
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

23
modules/ppcp-button/resources/js/modules/ContextBootstrap/MessagesBootstrap.js
View file

@ -1,5 +1,6 @@
import { setVisible } from '../Helper/Hiding'; import { setVisible } from '../Helper/Hiding';
import MessageRenderer from '../Renderer/MessageRenderer'; import MessageRenderer from '../Renderer/MessageRenderer';
import { waitForElement } from '../Helper/WaitForElement';
class MessagesBootstrap { class MessagesBootstrap {
constructor( gateway, messageRenderer ) { constructor( gateway, messageRenderer ) {
@ -93,17 +94,21 @@ class MessagesBootstrap {
render() { render() {
this.renderers.forEach( ( renderer ) => { this.renderers.forEach( ( renderer ) => {
const shouldShow = this.shouldShow( renderer ); waitForElement( renderer.config.wrapper )
setVisible( renderer.config.wrapper, shouldShow ); .then( () => {
if ( ! shouldShow ) { const shouldShow = this.shouldShow( renderer );
return; setVisible( renderer.config.wrapper, shouldShow );
} if ( ! shouldShow ) {
return;
}
if ( ! renderer.shouldRender() ) { if ( ! renderer.shouldRender() ) {
return; return;
} }
renderer.renderWithAmount( this.lastAmount ); renderer.renderWithAmount( this.lastAmount );
} )
.catch( ( err ) => console.error( err ) );
} ); } );
} }
} }

32
modules/ppcp-button/resources/js/modules/Helper/WaitForElement.js Normal file
View file

@ -0,0 +1,32 @@
/**
* Waits for a DOM element using setTimeout polling
* @param {string} selector - CSS selector for the element
* @param {number} timeout - Maximum time to wait in milliseconds (default: 3000)
* @param {number} interval - Polling interval in milliseconds (default: 100)
* @return {Promise<Element>} - Resolves with the element or rejects if timeout
*/
export function waitForElement( selector, timeout = 3000, interval = 100 ) {
return new Promise( ( resolve, reject ) => {
const timeoutId = setTimeout( () => {
clearInterval( intervalId );
reject( `Element "${ selector }" not found within ${ timeout }ms` );
}, timeout );
const element = document.querySelector( selector );
if ( element ) {
clearTimeout( timeoutId );
resolve( element );
return;
}
const intervalId = setInterval( () => {
const el = document.querySelector( selector );
if ( el ) {
clearTimeout( timeoutId );
clearInterval( intervalId );
resolve( el );
}
}, interval );
} );
}