How can I speed up image loading from a URL?

I have an image URL, and I’m providing it to the image src attribute on a modal component.
When the modal opens, there is a black card for a few seconds till the image shown.

How can I make it visible faster? I guess I cannot use spinner because it is not a fetch process.

This is my component, the image is just a URL.

const Modal = ({
  closeModal,
  runtime,
  title,
  rating,
  image,
  description,
}: ModalProps) => {
  const {
    movie: { backToListLabel },
  } = dictionary

  const getRating = () => {
    return `${rating}/${TOP_RATING}`
  }

  return (
    <ModalOverlay data-testid="modal">
      <ModalContent>
        <MovieCover
          alt="movie-cover"
          src={image}
        ></MovieCover>
        <MovideDetailsContainer>
          <MovieDetails>
            <Title>{title}</Title>
            <Duration>{runtime}</Duration>
            {rating && (
              <RatingContainer>
                <RatingIcon src={ratingIcon} />
                <Rating>{getRating()}</Rating>
              </RatingContainer>
            )}
            <Description dangerouslySetInnerHTML={{ __html: description }} />
          </MovieDetails>
          <BackToList
            onClick={closeModal}
            data-testid="back-to-list"
          >
            <BackToListIcon src={arrowIcon} />
            <BackToListTitle>{backToListLabel}</BackToListTitle>
          </BackToList>
        </MovideDetailsContainer>
      </ModalContent>
    </ModalOverlay>
  )
}

export default Modal