I can't stop loading progress in AwesomeButton React

Question

I want to stop this progress and i added a loading state in my code but when i clicked the button and the transaction will be successful, loading progress doesn't stop.

Awesome button demo webpage: https://caferati.me/demo/react-awesome-button

onSubmitAdd = async (event) => {
    event.preventDefault();
    this.setState({ loading: true });
    try {
      const { accounts, contract, addAmount, web3 } = this.state;
      await contract.methods.addMoney().send({
        from: accounts[0],
        value: web3.utils.toWei(addAmount, "ether"),
      });
    } catch (err) {
      this.setState({ errorMessage: err.message });
    }
    this.setState({ loading: false, addAmount: "" });
  };

Here is my render code:

<form onSubmit={this.onSubmitAdd}>
                  <div class="spaceTop"></div>
                  <div>
                    <input
                      placeholder="Value of ETH"
                      type="number"
                      id="id1"
                      value={this.state.addAmount}
                      onChange={(event) =>
                        this.setState({ addAmount: event.target.value })
                      }
                      style={{
                        backgroundColor: "#6d6d6d",
                        color: "#fcfcfc",
                        borderRadius: "100px",
                        height: "60px",
                        width: "300px",
                        paddingLeft: "2em",
                        marginBottom: "10px",
                      }}
                    />
                  </div>
                  <AwesomeButtonProgress
                    action={this.state.loading}
                    type="primary"
                  >
                    Add Money
                  </AwesomeButtonProgress>
                </form>

Answer 1

As per AwesomeButtonProgress docs, to stop the progress, you need to call next() within the action callback function after some asynchronous processing.

<AwesomeButtonProgress
        action={(element, next) => {
            console.log('clicked');
            setTimeout(() => {
                next();
            }, 600);
        }}
        type="primary"
    >
        Add Money
    </AwesomeButtonProgress>;

Based on the snippet shared by you, you are just passing true/false into action

You can also refer to this working example they have as part of the docs