cloudinary / frontend-frameworks

Cloudinary javascript frontend frameworks SDKs, including Shared HTML layer, Angular, React and Vue SDKs
https://www.cloudinary.com
MIT License
44 stars 16 forks source link

fix: cleanup html layer on component unmount #204

Closed lbendavid-cloudinary closed 1 year ago

lbendavid-cloudinary commented 1 year ago

Pull request for cloudinary/frontend-frameworks

For which package is this PR?

@cloudinary/html @cloudinary/react

What does this PR solve?

Add a fix to ensure the html layer is still in use when trying to update the img element.

In React 18 in <StrictMode />, the lazyload plugin does not work as expected. The issue is that since the plugin's promise is being resolved after a new instance of HtmlImageLayer is created, the previous HtmlImageLayer is updating the img element with the src which is not the expected behavior.

Final checklist

lbendavid-cloudinary commented 1 year ago

@const-cloudinary i've added two tests, one for testing the "bad" behavior, and the second for the desired behavior