Demo

Usage

const { isImageFetching, isImageError } = useTheImageLoader({ imageSrc });
return (
  <Flex>
    <Flex>
      {isImageFetching ? (
        <Spinner />
      ) : (
        <Card extend={{ maxWidth: '600px' }}>
          {isImageError ? (
            <Box>
              <Text>Error Triggered</Text>
            </Box>
          ) : (
            <Image
              extend={{ width: '100%', height: 'auto' }}
              src={imageSrc}
              alt="Field flowers"
            />
          )}
        </Card>
      )}
    </Flex>
  </Flex>
);