Do you have an example using the skeleton prop?

[jacintofleta]

I'm in love with your package.

I'm trying to use the skeleton prop but I'm missing something. Do you have an example?

<ReactCompareImage leftImage={pair[0]} rightImage={pair[1]} skeleton={<h4>Loading</h4>}/>

This is not displaying 'Loading'. I'm doing something wrong.

Thank you so much.

[tam315]

Hi @jacintofleta , could you try this one?
https://codesandbox.io/s/testing-react-compare-image-skelton-ip623

if you change img src to wrong one, you can see skeleton.

[jacintofleta]

Hi @junkboy0315 thank you for your answer.

I though skeleton was shown while image is loading. Is it shown just for wrong src images?

Thank you.

[tam315]

@jacintofleta

Wrong url is just for testing purpose.
It should also appear while loading too.

If you set a large image(as follows), it may be displayed for a moment.
https://storage-asset.msi.com/global/picture/wallpaper/wallpaper_15855579545e81b1c23ba07.jpg

[jacintofleta]

Thank you so much.

I think I have found my problem. When skeleton is shown forsome reason it appears a div with overflow: hidden so it is not displayed.

I don't know why is this happening.

Anyway thank you so much you have built a really useful package.

[tam315]

@jacintofleta
Oh, I found some unintended behavior.

I'll try to resolve this issue, but please take a moment.
To quick fix, import and use ReactCompareImage.tsx directly and
remove a style prop from the line below.

https://github.com/junkboy0315/react-compare-image/blob/master/src/ReactCompareImage.tsx#L383

[daleperforce]

Are you planning on releasing this change as a full release as this has caught me out. Would rather not have to modifiy library code.