Next.js Discord

Discord Forum

I want to add a loader to a function. I want to display the loader until the function has stopped.

Unanswered
Atlantic salmon posted this in #help-forum
Open in Discord
Atlantic salmonOP
How can I do that

7 Replies

server action or.....
server components?
or fetching from client components?
whats the context?
@aardani whats the context?
Atlantic salmonOP
I want to add it to a function that creates an NFT
const handleTransfer = async(id) => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();

    const itemId = id;
    const nftMpContract = new ethers.Contract(nftMpAddress, nftMpABI, signer);
    // const gasLimit = await nftMpContract.estimateGas.createMarketSale(itemId);
    const NFTprice = nft.price;
    console.log("Item Id :",itemId);
    const value = { value: ethers.utils.parseEther(NFTprice.toString()) };
    console.log(value);

    try {
      const transferNFTTransaction = await nftMpContract.createMarketSale(itemId, value);
  
      const receipt = await transferNFTTransaction.wait();
      console.log("NFT transferred successfully");
      console.log("Transaction hash:", receipt.transactionHash);
  
      // Only run the updateNFTOwner if the transaction is successful
      console.log("New Owner: ",newOwner);
      await updateNFTOwner(newOwner, id);
      await toast.success('NFT Bought Successfully ', {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: false,
        draggable: true,
        progress: undefined,
        theme: "light",
        });
        await fetchNFT()
    } catch (error) {
      console.error("Error transferring NFT:", error);
      toast.error('Error Buying NFT, Please Try Again Later', {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: false,
        draggable: true,
        progress: undefined,
        theme: "light",
        });
      // Handle the error
    }
  }
I can use the loader from toastify but again , not sure how to implement it