[Feature] Prevent displaying broken image while image is processing

[colbyfayock]

Feature Request

Is your feature request related to a problem? Please describe.

For some transformations like background removal and AI transformations, the first request may recieve a 423 if it needs to be processed.

The CldImage component currently polls the image until its finished and refreshes the DOM, but in the meantime, the image is displayed as broken on the page.

How can we prevent the image appearing visually broken?

Can somewhat try to replicate the way the underlaying Next Image component is handling placeholders potentially

[sahil9001]

Hey @colbyfayock , Can you please assign this to me?

[colbyfayock]

all yours! let me know if you have any questions or if anything is unclear

[sahil9001]

Hey @colbyfayock, how do I get the removed background image? When I used the dev setup they just simply won't load, I needed it to load as I am using original image blurring so wanted to see the blue over original image

[sahil9001]

@colbyfayock Also, how do we want to proceed with this? Do we want to show the spinner or the blurred image?

[colbyfayock]

@sahil9001 you need to enable the Backhround Removal Add-On within your Cloudinary account

https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon

I'm open to suggestions, I was thinking of something a bit unopinionated where not everyone may want a spinner, so perhaps a blurred image would be nice, especially because you can use the original image without the background removed to achieve that

[colbyfayock]

you'd want to do this work within this function: https://github.com/cloudinary-community/next-cloudinary/blob/main/next-cloudinary/src/components/CldImage/CldImage.tsx#L99

[sahil9001]

@sahil9001 you need to enable the Backhround Removal Add-On within your Cloudinary account

https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon

I'm open to suggestions, I was thinking of something a bit unopinionated where not everyone may want a spinner, so perhaps a blurred image would be nice, especially because you can use the original image without the background removed to achieve that

That would also mean that I have to buy subscription for background removal? Because on the UI it says to buy subscription in order to use it.

[colbyfayock]

it comes with 15 free removals under a free tier

[sahil9001]

I'm open to suggestions, I was thinking of something a bit unopinionated where not everyone may want a spinner, so perhaps a blurred image would be nice, especially because you can use the original image without the background removed to achieve that

I agree with this, thanks. Raising a PR

[colbyfayock]

@sahil9001 any updates?

[sahil9001]

Sorry man, got caught up with few things here, I will do this by tomorrow.