Image placeholder incorrectly lazy-loaded

Bug report for Cloudinary React SDK

Before proceeding, please update to latest version and test if the issue persists

Describe the bug in a sentence or two.

It appears that when defining a placeholder for a lazy-loaded image, the placeholder is also lazy-loaded. contrary to the documentation here: https://cloudinary.com/documentation/react_image_manipulation#image_placeholders

…

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [ ] Babel - Babel errors or cross browser issues [ ] UI/Performance - Display or performance issues [x] Behaviour - Functions aren’t working as expected (Such as generate URL) [ ] Documentation - Inconsistency between the docs and behaviour [ ] Incorrect Types - For typescript users who are having problems with our d.ts files [ ] Other (Specify)

Steps to reproduce

        <Image
          className='img-responsive'
          cloudName='...'
          label={label}
          publicId={src}
          responsive
          loading='lazy'
          width='auto'
          flag='lossy'
          secure
        >
          <Placeholder
            type='blur'
          />
        </Image>

Error screenshots

Please note how the placeholder image below has data-src rather than src

Browsers (if issue relates to UI, else ignore)

[ ] Chrome [ ] Firefox [ ] Safari [ ] Other (Specify) [x] All

Versions and Libraries (fill in the version numbers)

React Cloudinary SDK - 1.6.6 React - 16.5.2 Create-React-App - 3.4.1

[taijuten]

Thanks @maoznir

I’m only going by the documented behaviour here: https://cloudinary.com/documentation/react_image_manipulation#image_placeholders

You can also combine placeholder images with the lazy loading feature. In this case, the placeholder image is downloaded on page load, but the target image will only be downloaded once the user scrolls down to the image on the page.

[ardiewen]

I thought I’d comment my support for this as well, as I’m experiencing the exact same issue as @taijuten and the way he described it is consistent with the behaviour I’m seeing on my project.

On a product category page for an online store, all the image placeholders on the page should be loaded eagerly creating a “blurred” placeholder, then “blurred up” lazily to the target image.

What actually happens is the placeholder itself will be lazily loaded on scroll, causing a brief flash of whitespace, followed by a brief flash of blurred placeholder image, then followed by the target image load.