After submitting on create capaign loader is bufffering continuously

[ayushh0807]

my createcampaign code :
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { ethers } from 'ethers';

import { useStateContext } from '../context';
import { money } from '../assets';
import { CustomButton, FormField, Loader } from '../components';
import { checkIfImage } from '../utils';

const CreateCampaign = () => {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const { createCampaign } = useStateContext();
const [form, setForm] = useState({
name: '',
title: '',
description: '',
target: '',
deadline: '',
image: ''
});

const handleFormFieldChange = (fieldName, e) => {
setForm({ ...form, [fieldName]: e.target.value })
}

const handleSubmit = async (e) => {
e.preventDefault();

checkIfImage(form.image, async (exists) => {
  if(exists) {
    setIsLoading(true)
    await createCampaign({ ...form, target: ethers.utils.parseUnits(form.target, 18)})
    setIsLoading(false);
    navigate('/');
  } else {
    alert('Provide valid image URL')
    setForm({ ...form, image: '' });
  }
})

}

return (

{isLoading && }

Start a Campaign

  <form onSubmit={handleSubmit} className="w-full mt-[65px] flex flex-col gap-[30px]">
    <div className="flex flex-wrap gap-[40px]">
      <FormField 
        labelName="Your Name *"
        placeholder="John Doe"
        inputType="text"
        value={form.name}
        handleChange={(e) => handleFormFieldChange('name', e)}
      />
      <FormField 
        labelName="Campaign Title *"
        placeholder="Write a title"
        inputType="text"
        value={form.title}
        handleChange={(e) => handleFormFieldChange('title', e)}
      />
    </div>

    <FormField 
        labelName="Story *"
        placeholder="Write your story"
        isTextArea
        value={form.description}
        handleChange={(e) => handleFormFieldChange('description', e)}
      />

    <div className="w-full flex justify-start items-center p-4 bg-[#8c6dfd] h-[120px] rounded-[10px]">
      <img src={money} alt="money" className="w-[40px] h-[40px] object-contain"/>
      <h4 className="font-epilogue font-bold text-[25px] text-white ml-[20px]">You will get 100% of the raised amount</h4>
    </div>

    <div className="flex flex-wrap gap-[40px]">
      <FormField 
        labelName="Goal *"
        placeholder="ETH 0.50"
        inputType="text"
        value={form.target}
        handleChange={(e) => handleFormFieldChange('target', e)}
      />
      <FormField 
        labelName="End Date *"
        placeholder="End Date"
        inputType="date"
        value={form.deadline}
        handleChange={(e) => handleFormFieldChange('deadline', e)}
      />
    </div>

     <FormField 
        labelName="Campaign image *"
        placeholder="Place image URL of your campaign"
        inputType="url"
        value={form.image}
        handleChange={(e) => handleFormFieldChange('image', e)}
      /> 

      <div className="flex justify-center items-center mt-[40px]">
        <CustomButton 
          btnType="submit"
          title="Submit new campaign"
          styles="bg-[#1dc071]"
        />
      </div>
  </form>
</div>

)
}

export default CreateCampaign

And my context's indec.js code: import React, { useContext, createContext } from 'react';

import { useAddress, useContract, useMetamask, useContractWrite } from '@thirdweb-dev/react';
import { ethers } from 'ethers';
import { EditionMetadataWithOwnerOutputSchema } from '@thirdweb-dev/sdk';

const StateContext = createContext();

export const StateContextProvider = ({ children }) => {
const { contract } = useContract('0xEAB4bBf28B3D8B3D07dB6CCC874513cd2b8B4B6e');
const { mutateAsync: createCampaign } = useContractWrite(contract, 'createCampaign');

const address = useAddress();
const connect = useMetamask();

const publishCampaign = async (form) => {
try {
const data = await createCampaign({
args: [
address, // owner
form.title, // title
form.description, // description
form.target,
new Date(form.deadline).getTime(), // deadline,
form.image,
],
});

  console.log("contract call success", data)
} catch (error) {
  console.log("contract call failure", error)
}

}

const getCampaigns = async () => {
const campaigns = await contract.call('getCampaigns');

const parsedCampaings = campaigns.map((campaign, i) => ({
  owner: campaign.owner,
  title: campaign.title,
  description: campaign.description,
  target: ethers.utils.formatEther(campaign.target.toString()),
  deadline: campaign.deadline.toNumber(),
  amountCollected: ethers.utils.formatEther(campaign.amountCollected.toString()),
  image: campaign.image,
  pId: i
}));

return parsedCampaings;

}

const getUserCampaigns = async () => {
const allCampaigns = await getCampaigns();

const filteredCampaigns = allCampaigns.filter((campaign) => campaign.owner === address);

return filteredCampaigns;

}

const donate = async (pId, amount) => {
const data = await contract.call('donateToCampaign', [pId], { value: ethers.utils.parseEther(amount)});

return data;

}

const getDonations = async (pId) => {
const donations = await contract.call('getDonators', [pId]);
const numberOfDonations = donations[0].length;

const parsedDonations = [];

for(let i = 0; i < numberOfDonations; i++) {
  parsedDonations.push({
    donator: donations[0][i],
    donation: ethers.utils.formatEther(donations[1][i].toString())
  })
}

return parsedDonations;

}

return (
<StateContext.Provider
value={{
address,
contract,
connect,
createCampaign: publishCampaign,
getCampaigns,
getUserCampaigns,
donate,
getDonations
}}
>
{children}
</StateContext.Provider>
)
}

export const useStateContext = () => useContext(StateContext);

[Cryptbits]

I have the same issue please who can help out with this.