How to wait for a loader inside a button to complete loading?

I need to wait for a specific loader to complete loading once the button has been pressed, please take a look at the following image below:

As you can see from the image above, once the button has been pressed the ajax loader appears inside the button.

I have created the following selector to locate the button:

//form[contains(@id, 'messageform')]//button/span

Currently accepting the request (Clicking on the button) fails my test case as the script continues to the next test steps without waiting for the loader to complete.

I have tried the following and more, with no luck:

• Injecting JS to wait for the page to fully load.

  public void waitForPageToLoad() { ExpectedCondition expectation = driver -> ((JavascriptExecutor) driver).executeScript("return document.readyState").toString().equals("complete"); try { WebDriverWait wait = new WebDriverWait(getDriver(), 30); wait.until(expectation); } catch (Throwable error) { Assert.fail("Timed out waiting for Page Load Request to complete."); } }

• ExpectedConditions.invisibilityOf(element)

  WebDriver driver = getDriver();
  
  WebDriverWait exists = new WebDriverWait(driver, timer);
  exists.until(ExpectedConditions.refreshed(
          ExpectedConditions.invisibilityOf(element)));
  
  

Any ideas?