Demo

Usage

const imageSrc = '/api/images/placeholder';
const placeholderImg = '/image-placeholder.png';
const { isImageFetching } = useTheImageLoader({ imageSrc });
const src = isImageFetching ? placeholderImg : imageSrc;
return (
  <Flex>
    <Card extend={{ maxWidth: '560px' }}>
      <Image
        extend={{ width: '560px', height: 'auto' }}
        src={src}
        alt="Field flowers"
      />
    </Card>
  </Flex>
);