An image wrapper component, that holds all of our data inside it, plus it get triggered to run only when scrolled into view

image_wrapper_component.jsx

/*  an image wrapper component, that holds
    all of our data inside it, plus it
    get triggered to run only when scrolled into view. */
const ImageWrapper = ({ image, nr, render }) => (
  render ?
  <ImageContainer>
    <Suspense fallback={
      <ImageContainer> {/* This gets shown while the full res image is preloading */}
      <img className="blurry" src={image.small} alt={`img_small_${nr}`}/>
      {/* This gets shown below while the low res image is preloading */}
      <Style.Loader>{'Loading...'}</Style.Loader>
      </ImageContainer>
    }>
      <ImageContainer>
        {/* This gets shown when the full res image is finally loaded */}
        <Img src={image.large} alt={`img_large_${nr}`}/>
      </ImageContainer>
    </Suspense>
  </ImageContainer>
  :
  <ImageContainer/>
);