Handle pending transaction (useWeb3Contract)

I execute contract function via useWeb3Contract method in react-moralis

I want to display some loader while transaction is pending and not confirmed yet .

part of code:

const {
        runContractFunction: someFunction,
        isLoading,
        isFetching,
    } = useWeb3Contract({
        abi: contractAbi,
        ...
        },
    });

I execute someFunction on form submission:

...
onSubmit={async (e) => {
    e.preventDefault();
    await someFunction({
        onSuccess: async (tx) => {
            await handleSuccess(tx);
        },
    });
}

Then, i have the following expression:

{isFetching || isLoading ? ( <Loader />) : (<div>Some content</div>)}

But i can see <Loader /> only when metamask pops up to confirm transaction. After i confirmed sending, loader disappearing and doesnโ€™t show on the page anymore.

Iโ€™ve tried different ways with only isFetching or isLoading params in expression, but it also doesnโ€™t work

How can i handle pending transaction and show loader in a proper way while userโ€™s tx is pending and not confirmed yet? In that case, whats the difference between isFetching or isLoading if they both working in the same way?

You can handle pending transactions in this way and use waitingTx to show/hide the loader.

  const [waitingTx, setWaitingTx] = useState();
  useEffect(() => {
    async function init() {
      console.log("waiting for conformation");
      setWaitingTx(true);
      const tx = await data.wait();
      setWaitingTx(false);
      console.log("tx:", tx);
    }
    data && init();
    console.log("data:", data);
  }, [data]);