useWaitForTransactionReceipt - isLoading is true even after the transaction is completed.

[Venkateshb2877]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

This issue occurs only when the transaction is taking more time to execute. Whereas when the transaction is instant it is fine as expected.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

What Wagmi package(s) are you using?

wagmi

Wagmi Package(s) Version(s)

2.12.0

Viem Version

2.x

TypeScript Version

5

Anything else?

No response

[github-actions]

Hello @Venkateshb2877.

Please provide a minimal reproduction using StackBlitz, TypeScript Playground (for type issues), or a separate minimal GitHub repository.

Minimal reproductions are required as they save us a lot of time reproducing your config/environment and issue, and allow us to help you faster.

Once a minimal reproduction is added, a team member will confirm it works, then re-open the issue.

[Venkateshb2877]

On Form submit this function is called.

`const onSubmit = (data: AuctionInformationType) => {
	......rest of the code
	setApprovalForAll(reverseAuctionAddress, true);  ///blockchain call for approval
};`

Below code is the blockchain function for approval
const setApprovalForAll = (address: string, status: boolean) => { console.log(Setting Approval for); writeContract({ address: ratAddress, abi: ratAbi, functionName: "setApprovalForAll", args: [address, status], }); console.log(adminAccount.address); };

Once the blockchain is approved, backed api call is dispatched.

 `const {
	isLoading: isConfirming,
	isSuccess: isConfirmed,
	data,
} = useWaitForTransactionReceipt({
	hash,
});

useEffect(() => {
	if (error) {
		toast.error(error?.message);
		setNftApproved(false);
		setLoading(false);
	}

	if (isConfirmed) {
  //once blockchain approval isSuccess then backend api is called.
  dispatch(PostCreateAuction(body));
  setLoading(false);
}
}, [isConfirmed, isConfirming, error, data]);`

Sometimes when the approval function takes longer time to complete the transaction, isLoading is frozen as true and isConfirmed(i.e isSuccess) as false. Even after the completion of transaction, isSuccess remain as false and api call is not made.
The state of isConfirming and isSuccess are not updated.

This issue arises only when the transaction takes more time to complete. When it is fast, it works as expected.

Please find the TypeScript Playground Below.

Code Link

[raycaballero]

I'm also encountering this issue now.

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Wagmi version. If you have any questions or comments you can create a new discussion thread.