Refresh page upon MetaMask Confirmation. Web3js & React()

Question

I would like to reload the React Web3 wallet's page upon MetaMask Confirmation. Meaning when the ERC-20 token send transaction is confirmed, the page should reload or state should update to display the new balance.

In this transfer function, the pseudo-code starts with ".on()":

function refreshPage() {
  window.location.reload(false);
}

transfer(recipient, amount) {
  this.state.waviiiToken.methods.transfer(recipient, amount).send({ from: this.state.account })
  .on('confirmation' refreshPage);
}

Please let me know if this is possible or if you have an example I can reference that updates state or refreshes the page.

Answer 1

I added a window.location.reload() after successful transaction (my web3 await function). This works on local test net but will have to do some more digging due to the longer wait times on the Main Net and other Test Nets.

** EDIT **

Thanks @JaxCoder, This helped me find the solution. window.location.reload() was part of it. To make sure the loader / progress bar keeps running until full confirmation of the transaction is received, the following is the solution:

transfer(recipient, amount) {
  this.setState({ loading: true })
  this.state.waviiiToken.methods.transfer(recipient, amount).send({ from: this.state.account }).on('confirmation', (reciept) => {
    this.setState({ loading: false })
    window.location.reload()
  })
}