Cancelled requests @cloudinary/react

[peterwiebe]

For which package is this issue?

@cloudinary/react

Describe the issue in a sentence or two.

Trying out this dependency to optimize responsive image requests in my project. Once I memoized my image component (and not use the lazy load or placeholder plugins) I was able to get the number of requests image down to 3 - one cancelled request and one duplicate request.

Is there a reason for the cancelled request? The url looks almost identical to the successful ones 🤔

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[x] Performance - Performance issues
[ ] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce

Code sample implementation

function CloudinaryImage({ alt, path }: CloudinaryImageProps) {
  const [hasLoaded, setHasLoaded] = useState(false);
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'pgatour-prod'
    }
  });

  const imagePath = cld.image(path).format('auto').quality('auto').setDeliveryType('fetch');

  return (
    <div className={styles.cloudinaryImage}>
      <AdvancedImage
        alt={alt}
        className={classNames(styles.thumbnail, { [styles.isVisible]: hasLoaded })}
        cldImg={imagePath}
        loading="lazy"
        plugins={[responsive({ steps: 100 })]}
        onLoad={(e: any) => {
          setHasLoaded(true);
        }}
        style={{ maxWidth: '100%' }}
      />
      <Skeleton className={classNames(styles.thumbnailSkeleton, { [styles.isHidden]: hasLoaded })} />
    </div>
  );
}

export default memo(CloudinaryImage);

Error screenshots

Screen.Recording.2025-03-28.at.3.49.34.PM.mov

Browsers (if issue relates to UI, else ignore)

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

Versions and Libraries (fill in the version numbers)

package SDK version
Node - 18.18.2
NPM - 9.8.1

Config Files (Please paste the following files if possible)

Package.json

Repository

If possible, please provide a link to a reproducible repository that showcases the problem

[MillieAx]

@peterwiebe thanks for raising this. Could you please open a support request and share your app via codesandbox.io or a similar website? Thanks!