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

[devpatocld]

@sahil9001 Hi! Are you insterested in working on this?

[Vaibhav91one]

Hey @devpatocld. I would like to work on this issue if no one is taking up this issue.

[devpatocld]

@Vaibhav91one we are not assigning issues. Feel free to submit a PR but please make sure no one has submmited one for this issue alreay

[Pratheek2474]

Hi, If no one is working on this, i would like to work on this and submit a PR! Following up on @sahil9001's work.

[Pratheek2474]

Hello! I am almost done but how do i test whether it is working or not? Do i make a sample page in the local install and use the changed local component 'CdImage' to see if it is working as intended?

[Vaibhav91one]

Hi @colbyfayock @devpatocld, I have raised a PR. Please have a look at it and please let me know if any changes are required.

[devpatocld]

@Vaibhav91one Thank you! will review as soon as we can!