cloudinary-react: Images blocking rendering

I have found another issue when testing these components some more. Each <Image> <Transformation> component is blocking the rendering of whole app.

Each image add about 120-300ms when testing. This means that having around 16 images on a single page adds between 3-5 seconds of page loading.

I can’t find the exact cause but from a quick look it seems to be related to calculating the imagesize and URL.

screen shot 2017-05-25 at 14 41 07

And this happens every time the components are loaded.

For example if I have 16 images on start page

Start page (+5sec blocked loading) -> Click on subpage (loads fast no images) -> Click back to start page (16 images already downloaded but page freezes for 5 sec anyway).

This makes cloudinary-react unusable at the moment.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 33 (10 by maintainers)

Most upvoted comments

@slackday @wallawe @edwardsilhol @jimmiebtlr @angrytoad @nryoung Version 1.1.1 was published today. It should fix the problem.

I’d appreciate your feedback!

tocker on Jun 6, 2019

@strausr I unfortunately couldn’t replicate it exactly in the example app, but in a real application with tons of DOM elements the transformations slow down significantly, eg. ~500ms per transformation.

Besides this being the normal creation time for on-the-fly transformations, you will notice even in the example app it blocks rendering of any of the DOM elements until the all of the transformations are complete. This shouldn’t block rendering of non transformation elements.

nryoung on Jun 5, 2018

Hey guys, I had to hunt for this for hours, maybe update the Cloudinary React documentation with this syntax ? Thanks for the solution !!!

edwardsilhol on Apr 11, 2019

@tocker Yep, that solved the problem as well. Thanks for your reply.

wallawe on Apr 8, 2019

@wallawe can you try the Image component with a transformation attribute instead of a tag?

let tr= {
  quality: "auto", 
  height: 56,
  width: 80,
  crop: "thumb",
  fetchFormat: "auto"
};

// ...

heroImages.map(img=>
  <Image publicId={img} cloudName="hidden" transformation={tr} key={img}></Image>
)

Let us know if it made a difference.

tocker on Apr 8, 2019

Just spent hours trying to figure this out - my modal with 17 images takes 6 seconds to open (they’re very small images too)…

When I switched over to using the direct URL everything worked fine.

Before:

Profiler makes it look like the GPU got completely toasted Screen Capture on 2019-04-03 at 12-22-17 :

After switching over to this everything was fine:

wallawe on Apr 3, 2019

Getting rid of transform noticeably speeds up the app.

jimmiebtlr on Mar 20, 2019

This is still a major issue

jimmiebtlr on Mar 20, 2019

@eitanp461

@angrytoad this should have been fixed by #39, and published in version 1.0.6. Which version of the SDK are you using?

We are using this version and we are still seeing ~470ms render delays per image that uses this component.

I am not sure why this component would block rendering when fetching the image?

nryoung on May 30, 2018

Oh man, the HOURS I spent tracking down this bug. For me it was quite severe, causing most of my page to not render at all. But weirdly, only on mobile, making it extra tricky to debug.

The fix I went with was just referencing the image and transforming it by URL, not using cloudinary-react at all, i.e.:

<img src={`${IMG_PATH}c_scale,h_800,w_800,f_auto/v1/${details.artworkId}`} ... />

(may not work for all use cases)

liamjohnston on Feb 25, 2018