How to run my JS script in react Native WebView when the web page JS script is done running?

I would like run my javascript codes only when the website I am targeting has finished running these pieces of javascript scripts:
I am building an application in react native and would like to implement paystack payment gateway.

I used React Native WebView and injectJavascript method. The issue is that the script runs when the website is still on loading state. My javascript code would like to get the buttons on the webpage and listen to click event. However, on loading state, the targeted button element won’t be available, hence the JS code finds nothing. Take a look at this screenshot:

I would like to run the script after apploader has been removed. Once apploader element has been removed, the button element I am targeting would be available for selection. Currently, I am using setTimeOut to wait for the apploader to completely run and removed from the node.
This is not best practice because if the apploader delays further due to poor network, etc, the setTimeOut which I set at 3000 would trigger while the elements I targeted are not ready yet. This will make my code not to work.
How can I run my code after the apploader has successfully removed from the page?

Here is the code that I wrote with setTimeOut:

 const handleCancleScript = `

  setTimeout(function() {
    const buttons = document.getElementsByClassName("text")

    for(let button of buttons){
    
       const resp = button.textContent
       if(resp == "Cancel Payment"){
        button.addEventListener("click", function() {  
            var response = {event:'cancelled'};
            window.ReactNativeWebView.postMessage(JSON.stringify(response))
            });
        
       }
       
    }
  
}, 3000);
  true; 
`