Handling UI when a transaction is in pending (MetaMask)

Question

I have a Metamask payment that works fine. It's triggered by an onClick of a button. I want to show something to the user during the pending of the transaction, but I can't figure out how since the promise returned is already the mined transaction. This is the code:

web3js.eth.sendTransaction({
                to: '0x6Dc8956E655Ccd80187265107b848D8c5B6d2459',
                from: address,
                })
                    .then(function (txHash) {
                                    console.log(txHash);
                             }).catch(error => {
                                console.log(error);
                              });
                      })

Answer 1

you need to use the state of your component

In constructor:

this.state = {willShowLoader: false}

In your onclick function (the second parameter is the callback)

this.state.setState({willShowLoader: true}, sendTransaction)

In your send transaction function: (note the setState inside of then)

web3js.eth.sendTransaction({
            to: '0x6Dc8956E655Ccd80187265107b848D8c5B6d2459',
            from: address,
            })
                .then(function (txHash) {
                          this.setState({willShowLoader:false})
                                console.log(txHash);
                         }).catch(error => {
                            console.log(error);
                          });
                  })

Then in your render method: (using conditional rendering)

(this.state.willShowLoader)?<Spinner/>:<notSpinner/>