Demo

Usage

const imageSrc = '/api/images/srcset';
const imageSrcSet = 
 '/api/images/srcset 480w, ' +
 '/api/images/srcset 960w' +
 '/api/images/srcset 1440w';
const { isImageFetching } = useTheImageLoader({ imageSrc, imageSrcSet });
return (
  <Flex>
    {isImageFetching ? (
      <Spinner />
    ) : (
      <Card extend={{ maxWidth: '600px' }}>
        <Image
          extend={{ width: '100%', height: 'auto' }}
          width="600"
          src={imageSrc}
          srcSet={imageSrcSet}
          alt="Top view island"
        />
      </Card>
    )}
  </Flex>
);