frontend-frameworks icon indicating copy to clipboard operation
frontend-frameworks copied to clipboard

Image flickering when using @cloudinary/react lazyload after adding alt text

Open victorcarvalhosp opened this issue 1 month ago • 1 comments

New issue for cloudinary/frontend-frameworks

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

For which package is this issue?

@cloudinary/react

Describe the issue in a sentence or two.

After adding alt text to an image and adding the lazyload plugin, an image flickering is happening very briefly, as it show the alt text before the image. You can see it here if you refresh the demo a few times: https://codesandbox.io/p/sandbox/lazy-loading-lqip-react-js-sdk-2-0-forked-c3hsk6?file=%2Fsrc%2FLazyloading.js%3A34%2C40

I've tried adding a placeholder too and the issue remains the same. using onError to add a default image as shown here doesn't seem to work as well.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [X] Performance - Performance issues [X] Behaviour - Functions aren’t working as expected [ ] Documentation - Inconsistency between the docs and behaviour [ ] Incorrect Types [ ] Other (Specify)

Steps to reproduce

Just add an image with alt text and lazyload plugin and then refresh the page a few times and you be able to see it a few times before the image loads

<AdvancedImage
              alt="This is the alt text"
              key={i}
              cldImg={cld.image(image)}
              plugins={[lazyload()]}
            ></AdvancedImage>

Error screenshots

image

You can see the "This is the alt text" alt text very quickly before the image loads

Browsers (if issue relates to UI, else ignore)

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

Versions and Libraries (fill in the version numbers)

package SDK version Node - 18.15.0 NPM - 9.6.7

Config Files (Please paste the following files if possible)

"dependencies": {
    "@cloudinary/react": "^1.13.0",
    "@cloudinary/url-gen": "^1.19.0",
[...]
}

Repository

https://codesandbox.io/p/sandbox/lazy-loading-lqip-react-js-sdk-2-0-forked-c3hsk6?file=%2Fsrc%2FLazyloading.js%3A33%2C13-38%2C30

victorcarvalhosp avatar May 06 '24 08:05 victorcarvalhosp