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.

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.

[tocker]

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

I’d appreciate your feedback!

[nryoung]

@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.