Placeholder plugin not doing anything

[laetitiao]

For which package is this issue?

@cloudinary/react 1.11.1 (and 1.11.0)

Describe the issue in a sentence or two.

I tried to implement the Placeholder plugin on my React application, based on the example found here: https://github.com/cloudinary-devs/cld-react-plugins However the Placeholder plugin doesn't do anything, the image is loaded in high quality, it's like it's not there. I tried to change the version to 1.8.0, the placeholder worked, but no more the responsive.

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

import './App.css';
import { CloudinaryImage } from "@cloudinary/url-gen";
import {
  AdvancedImage,
  lazyload,
  placeholder
} from "@cloudinary/react";

function App() {

  const largeImage = new CloudinaryImage("oil", {
    cloudName: "demo"
  });

  return (
    <div className="App">
      <div style={{ height: "700px" }}>
        Scroll down for lazyloading a large image with a placeholder
      </div>
      <AdvancedImage
        style={{ height: "700px" }}
        cldImg={largeImage}
        plugins={[lazyload(),
        placeholder({ mode: 'pixelate' })
        ]}
      />
    </div>
  );
}

export default App;

Browsers (if issue relates to UI, else ignore)

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

Versions and Libraries (fill in the version numbers)

package SDK version Node - 18.13.0 NPM - 8.19.3

Config Files (Please paste the following files if possible)

Package.json

  "dependencies": {
    "@cloudinary/react": "1.11.1",
    "@cloudinary/url-gen": "^1.9.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.14",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },

[tamaracloudinary]

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

[lbendavid-cloudinary]

Hi @laetitiao , the order of the plugins does matter. In order to make it works as expected, you need to switch the order of the plugins:

<AdvancedImage
    style={{height: "700px"}}
    cldImg={largeImage}
    plugins={[placeholder({mode: 'pixelate'}), lazyload()]}
/>

[laetitiao]

Hello @lbendavid-cloudinary , thank you for your response. Indeed it works switching the order as you said. But for information, on the Readme, the order is incorrect, and on this page too : https://cloudinary.com/documentation/react_image_transformations#plugin_order

[lbendavid-cloudinary]

@laetitiao Actually there is an issue with our current version, and we are going to handle it soon. After we will fix it, the order will be the same as in docs. Meanwhile, a temporary solution would be to switch the order as i described. I'll re open this issue.

[lbendavid-cloudinary]

@laetitiao a fix was released in version 1.11.2