In react query it gives you the isPending feature which allows you to create some type of spinner when an operation occurs. However, when you use the isPending feature, the component that triggers the mutation gets replaced by the returned spinner that is inside isPending block but I don’t want the spinner to replace the component instead I want the spinner to be placed on top of the component. I am not sure how to do this?

function NewUser() {
  const { isLoading, isSuccess, error, mutate } = useMutation(createUser);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (error) {
    return <span>{`An error has occurred: ${error.message}`}</span>;
  }

  return (
    <div>
      {isSuccess && <span>User added successfully</span>}

      <button onClick={() => mutate({ name: 'Gapur', lastName: 'Kassym' })}>
        Create User
      </button>
    </div>
  );
}

As you can see in the image below the card gets replaced by the spinner pop up modal. I still want my card to appear but with the spinner on top of the card.

This image is the card.

When I click on the button that triggers the mutation the card disappears and gets replaced by the spinner. I don’t want the card to be replaced, instead I want the spinner to be on top of the card while it is in isPending state.