Merge pull request #3577 from woocommerce/PCP-4990

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

View file

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

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 );
} );
}