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

[RobSchilderr]

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

1. Use the AdvancedImage component with conflicting plugins such as the placeholder and lazyload plugins in a React app.
2. Observe the compromised responsiveness of the component and the excessive data download for some users.
3. 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.