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

[victorcarvalhosp]

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

Repository

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

[dannyv-cloudinary]

Hi @victorcarvalhosp. Thanks for flagging this with us. I have raised this internally (ref SNI-8022) and we will provide you with updates when we can.

[victorcarvalhosp]

Hi @dannyv-cloudinary! Thanks for looking into it. Do you guys have some updates on this? Our site heavily relies on images, and we need lazy load to work properly on it.

Maybe you have some workaround that we cab do in the meantime?

[PixelCook]

Hi there @victorcarvalhosp. Currently, there is a fix being worked on, and although I don't have a specific ETA I do hope it will be merged soon. I tried tying this ticket to your account but couldn't find your cloud "dessmo". Can you please your cloud name?

[victorcarvalhosp]

Hi there @victorcarvalhosp. Currently, there is a fix being worked on, and although I don't have a specific ETA I do hope it will be merged soon. I tried tying this ticket to your account but couldn't find your cloud "dessmo". Can you please your cloud name?

Nice, thanks! Our cloud name is "webalys".

[PixelCook]

Thanks @victorcarvalhosp. Your account is now linked. As soon as we have more info I'll make sure to update you.

[victorcarvalhosp]

Hi @PixelCook ! Do you have any news about this? We're thinking about dropping the Cloudinary reactjs library because of this.... It would be great to have a fix or workaround before we need to do this though!

[PixelCook]

@victorcarvalhosp Currently I don't have an expected date of completion as this ticket needs to be balanced with other tickets but I hope that we can finish it sooner than later. I'll check in with our team and see if we can't expedite things.

[victorcarvalhosp]

@PixelCook Hi, it's me again. Do you have any news about this? There's some other place that we can send a message to try to bump the priority of this task? We're paying more than $500 a month, so it's quite frustrating this feature isn't working as intended and develop our own component for that.

[PixelCook]

Hi there Victor, I understand your frustration and have pinged our development team again. I may have found a temporary work around.

Can you please try this?

lazyload({
threshold: 0.1, // with any value here
}),

[victorcarvalhosp]

Hi there Victor, I understand your frustration and have pinged our development team again. I may have found a temporary work around.

Can you please try this?

lazyload({ threshold: 0.1, // with any value here }),

This didn't fix the issue on our end.

[PixelCook]

Hi Victor,

Thanks for following up. I'll check back in with Dev and let them know.

[PixelCook]

Hi Victor,

We are unable to replicate your issue after implementing the workaround. Please provide an example if you are still experiencing issues.