How to show skeleton loading until image has rendered completely?

Question

I'm using react-loading-skeleton and this is my code (simplified):

const [image, setImage] = useState("");

const { isLoading } = useQuery(
    ["getImage"],
        async () => {
            await axios.get(someurl).then(res => {
                let theimage = res.data.image;
                if (theimage != "" && theimage != null) {
                    setImage(theimage)
                }
            })
        }
    );

return (
    <>{showLoading ? <Skeleton /> : <img src={image} />}</>
)

The problem is the gap (jump, shift, ...) when switching from skeleton to image.
Look at the text. It changes from "loading" to "loaded!" as soon as imageFromState is loaded, but it takes time to show the image.

Is there a way to see if the image had loaded & rendered completely and only switch from skeleton to image after that?

(I know I can set a default image src and give the container a fixed height so it doesn't move, but I want to show the skeleton animation until the image is fully visible)