I'm trying to add a button to the wordpress elementor mini cart when it's empty. To do this i thought i'd use a promise to wait for the element to load then insert some adjacent html code to display the button.

Both parts appear to work separately the returning of a promise and then inserting the element. However when they work together no element appears? Any ideas on how to debug this? What to look out for. How can i monitor the order of each thing firing to make sure it's happening in the right order?

Here's the code I have below: It's a snippet for wordpress.

<script>
    const checkElement = async selector => {
        while ( document.querySelector(selector) === null) {
            await new Promise( resolve =>  requestAnimationFrame(resolve) )
        }
        return document.querySelector(selector); 
    };

    checkElement('.woocommerce-mini-cart__empty-message').then((selector) => {
        
        var message = `
            <div style="margin-top:2rem" class="elementor-button-wrapper">
                <a href="/toilets" class="elementor-button-link elementor-button elementor-size-sm">
                    <span class="class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">View our products</span>
                    </span>
                </a>
            </div>`;
        selector.insertAdjacentHTML('afterend', message);
        console.log(selector);
    });

</script>
<?php } );

The page in question is https://staging-woowoowaterlesstoilets.kinsta.cloud/ if you click on the basket when there is nothing there, there should appear a button. It was working before but after updating some plugins and wordpress it's stopped working.