Description
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
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",
[...]
}