Ethers.JS: provider.waitForTransaction doesn't wait

Question

I'm trying to improve UX by showing a spinner while a transaction gets resolver, however my flow is breaking. What am I doing wrong here?

    // WITHDRAWALS
    if (currentTab == "withdrawal") {
      if (
        contractInfo.qitbalance > BigNumber.from(0) &&
        inputValue !== "" &&
        Date.now() / 1000 > contractInfo.lockupEnds
      ) {
        if (ethers.utils.parseEther(inputValue).toBigInt() > 0) {
          const QITconnect = QIT.connect(library.getSigner());
          try {
            await QITconnect.requestWithdrawal(ethers.utils.parseUnits(inputValue, 6))
              .then((tx: any) => {
                //action prior to transaction being mined
                console.log("Transaction pending");
                console.log(tx);
                library.provider
                  .waitForTransaction(tx.hash)
                  .then(() => {
                    //action after transaction is mined
                    console.log("Transaction mined");
                  })
                  .catch(() => {
                    //action if transaction fails
                    console.log("Transaction failed");
                  });
              })
              .catch(() => {
                //action to perform when user clicks "reject"
                console.log("Transaction rejected");
              });
          } catch (error: any) {
            setShow(true);
            console.log("User rejected transaction");
          }
        }
      }
    }

This is what's happening immediately.

Answer 1

I fixed it by using .wait() on the transaction. So in my case it looked like this:

    // WITHDRAWALS
    if (currentTab == "withdrawal") {
      if (
        contractInfo.qitbalance > BigNumber.from(0) &&
        inputValue !== "" &&
        Date.now() / 1000 > contractInfo.lockupEnds
      ) {
        if (ethers.utils.parseEther(inputValue).toBigInt() > 0) {
          const QITconnect = QIT.connect(library.getSigner());
          try {
            const transaction = await QITconnect.requestWithdrawal(
              ethers.utils.parseUnits(inputValue, 6)
            );
            setShow(true);
            const receipt = await transaction.wait();
            setShow(false);
            console.log(receipt);
          } catch (error: any) {
            setShow(true);
            console.log("User rejected transaction");
          }
        }
      }
    }
  }