AdvancedImage component responsiveness compromised with conflicting plugins in React (17 and 18)

RobSchilderr commented 1 year ago

New issue for cloudinary/frontend-frameworks

"@cloudinary/react": "^1.11.0",

For which package is this issue?

"@cloudinary/react": "^1.11.0",

Describe the issue in a sentence or two.

The AdvancedImage component's responsiveness is compromised when used with conflicting plugins simultaneously, which can cause excessive data download for users. A simplified implementation that only utilizes the responsive plugin resolves the issue. This issue may be a bug in the React SDK.

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] 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

Use the AdvancedImage component with conflicting plugins such as the placeholder and lazyload plugins in a React app.
Observe the compromised responsiveness of the component and the excessive data download for some users.
Switch to a simplified implementation that only uses the responsive plugin to resolve the issue.

Error screenshots

N/A

Browsers (if issue relates to UI, else ignore)

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

Versions and Libraries (fill in the version numbers)

package SDK version

"@cloudinary/react": "^1.11.0"
React: "18.2.0" & "17.0.2"
Other relevant libraries: [insert version]

Config Files (Please paste the following files if possible)

Package.json:

Code Examples

Original implementation:

<AdvancedImage
  style={style}
  alt={alt}
  cldImg={myImage}
  plugins={[    ...(withBlur      ? [          placeholder({            mode: 'blur',          }),        ]
      : []),
    lazyload(),
    responsive({
      steps: 150,
    }),
  ]}
/>

Simplified implementation:

<AdvancedImage
  style={style}
  loading="lazy"
  alt={alt}
  cldImg={myImage}
  plugins={[
    responsive({
      steps: 150,
    }),
  ]}
/>

In the original implementation, the AdvancedImage component is used with three plugins: the placeholder plugin with a blur mode (if withBlur is true), the lazyload plugin, and the responsive plugin with 150 steps. In contrast, the simplified implementation only uses the responsive plugin with 150 steps and sets the loading attribute to "lazy". This results in a more efficient and responsive image-loading experience for users.

tamaracloudinary commented 1 year ago

Thanks for reporting this, we are checking your inquiry with the team and will update you soon with our insights.

tamaracloudinary commented 1 year ago

Hi @RobSchilderr, A new version with a fix to the order of the plugins was just released, and now the example in the docs should work as expected. Please let me know if you still experiencing issues

cloudinary / frontend-frameworks