Demo

Usage

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