react-progressive-image-loader

React component to create images with different resolutions progressively as Medium or Pinterest does

Pure React Implementation

import ImageLoader from 'react-progressive-image-loader';

<ImageLoader
  src="/thumbnail.png"
  placeholder="/icon.png"
  fallback="/large_image.jpg"
  retryInterval={3000}
  maxIntents={3}
  delay={3000}
>
  {({ src, retry }) => (
    <img
      src={src}
      alt="Image Name"
      width={100}
      height={100}
      onClick={() => { retry() }}
    />
  )}
</ImageLoader>

NextJS SSR Implementation

Probably you need to load the library dynamically in Next disabling SSR

import dynamic from 'next/dynamic';

const ImageLoader = dynamic(async () => await import('react-progressive-image-loader'), {
  ssr: false,
});

// ...rest of code

Parametters

Parametter	Description	Required
src	Target URL that will be managed the load like a thumbnail	true
placeholder	The lightest resource's url	true
fallback	The heaviest resource's url	false
delay	Delay time in milliseconds to load initially resources (src)	false
maxIntents	Max number of intents to load src	false
retryInterval	Time in milliseconds to await before reload src	false