Does responsive plugin work as it should in React SDK?

[alexstanbury]

For which package is this issue?

React

Describe the issue in a sentence or two.

Using the responsive plugin, the original image also loads, making the plugin redundant. I'm not sure if I've completely missed the point of a responsive plugin, but it seems like it's not working like it should. If I have a massive image that I want to load on a small screen, the responsive plugin should only load an image that is sized to fit on the small screen, but what's happening is the massive image gets loaded then a responsive one loads after that. So not only does not save any bandwidth, it actually increases it! Additionally, what is the point of continually loading smaller images if the screen size gets smaller? Surely it would make more sense to only load new images if the screen size increases? Again, seems like a complete waste of bandwidth and defeats the point of having this plugin. I can only assume this is a bug.

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 following as taken from the docs:

const cloudinaryImage = new CloudinaryImage("sample", { cloudName: "demo" });

<AdvancedImage cldImg={cloudinaryImage} plugins={[responsive()]} />

Observe two image downloads in the network panel, one full size and one responsive.

Error screenshots

Browsers (if issue relates to UI, else ignore)

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

Versions and Libraries (fill in the version numbers)

Node - 0.0.0
NPM - 0.0.0

Config Files (Please paste the following files if possible)

"@cloudinary/react": "^1.4.1",
"@cloudinary/url-gen": "^1.8.0",

[PixelCook]

Alex if you add steps as a parameter to the responsive plugin do you still have the same issues?

Here is a sandbox to reference:
https://codesandbox.io/s/fragrant-cdn-trr63y?file=/src/App.js

[harry-gocity]

+1 on this, we are seeing the same issues @alexstanbury mentions regarding (1) initially loading the full size image and (2) redundantly loading smaller and smaller images as the screen size decreases

Using this along with blurred placeholder actually means the browser pulls 3 images - the full size one, a blurred placeholder, and then the actual responsive image.

[PixelCook]

@harry-gocity did you see my previous response? Can you reproduce your issue via sandbox?

Thanks!

[harry-gocity]

@PixelCook https://codesandbox.io/s/gifted-pasteur-5gft59?file=/src/App.js

The problem is more easily reproduced with cache disabled:

twice.mp4

But otherwise always happens to me on first load of the sandbox:

trimmed1080.mov

[momoip]

HI there,
It does seem like an issue; I'm consulting with our SDK team and respond as soon as I have insights to share.
Thanks,

[wissam-khalili]

Hi there,

The issue was identified as a bug. We are working on fixing the issue.
We will keep you posted once ready.

Regards,
Wissam