I want to add a loader to UI when there is a click on confirm transaction popup on metamask. When user clicks on confirm I want to show the loader until the transaction is confirmed. Is there a way to handle this?? Is there any event??

2 Answers 2


Ethers.js has a very simple solution for this question:

const provider = new ethers.providers.Web3Provider(window.ethereum);

let tx = await contract.method(...)
let txConfirm = await provider.getTransaction(tx.hash)
///perform operation only after "Confirm" is clicked in MetaMask

See docs on provider.getTransaction() here: https://docs.ethers.io/v5/single-page/#/v5/api/providers/provider/-%23-Provider-getTransactionReceipt


You can use the Ethers.js library to show the loader immediately after the user clicks on the confirm transaction button and then hide the loader from your UI once the transaction is confirmed:

    // Assuming you have a contract instance and a method to show/hide the loader

async function sendTransactionAndWait() {
    // Show the loader

    // Initialize the provider
    const provider = new ethers.providers.Web3Provider(window.ethereum);

    // Send the transaction
    let tx = await contract.method(...);

    // Wait for the transaction to be confirmed
    let txConfirm = await provider.getTransaction(tx.hash);

    // Hide the loader

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.