React Mint Dapp Question: How to implement a "Please Wait" css pop-up while time consuming calls are being processed?

My minting dapp is working fine. However there is a huge time lag between user calling the mint function (with button click) until metamask opens to approve txn. This is because I am making cloud function calls and .ipfs() calls to upload the image and metadata before the contract’s mint function is triggered and uri is passed in.

I wish to have a css pop-up during this time (between mint button click and metamask open). Any implementation?
Code below:

async function mintMyNFT() {
    if(!checkTraits()) {
      alert("Some of the selected traits are not in your wallet. Ensure all trait-titles are yellow. Click 'My Owned Traits' again to refresh wallet traits.")
    }

    else {
      const base64 = await getImage()
      const imageData = new Moralis.File("img.png", {base64: base64});
      await imageData.saveIPFS();
      const imgURL = await imageData.ipfs();

      const metadata = {
        "name": "Goatd",  
        "description": "Customizable PFP on Avax", 
        "image": imgURL, 
        "attributes": [
            {
            "trait_type": "Background", 
            "value": props.chosenTrait.Background
          },
          {
            "trait_type": "Body", 
            "value": props.chosenTrait.Body
          },
          {
            "trait_type": "Head", 
            "value": props.chosenTrait.Head
          },
          {
            "trait_type": "Eyes", 
            "value": props.chosenTrait.Eyes
          },
          {
            "trait_type": "Mouth", 
            "value": props.chosenTrait.Mouth
          },
          {
            "trait_type": "Headwear", 
            "value": props.chosenTrait.Headwear
          }
          ], 
      }

        const tokenMetadataUrlResult = await Moralis.Cloud.run("handlemintTest", {
                  metadata
              });
    //console.log(tokenMetadataUrlResult)
      //const tokenMetadataUrl = await tokenMetadataUrlResult.path
      
      const mintResult = await mintFetch({
        params: {
            abi: spotNFTAbiFuji,
            contractAddress: spotNFTContractFuji,
            functionName: "mint",
            params: {
                bg: props.chosenTrait.BackgroundID,
                body: props.chosenTrait.BodyID,
                head: props.chosenTrait.HeadID,
                eyes: props.chosenTrait.EyesID,
                mouth: props.chosenTrait.MouthID,
                headwear: props.chosenTrait.HeadwearID,
                uri: tokenMetadataUrlResult,
            },
            msgValue: Moralis.Units.ETH(1.0),
        },
        onError: (err) => {
            alert(JSON.stringify(err.data.message));
        },
        onSuccess: (data) => {
            console.log(data);
        },
    }); 
    }

You can use modal combined with stepper component from web3uikit.
https://web3ui.github.io/web3uikit/

1 Like