animation support

[jasonslyvia]

Great component, would be nice if we can integrate some animation into this, stuff like https://codepen.io/Mestika/pen/ByNYBa, thoughts?

[Chathula]

yep it is a must!

[FrancescoCioria]

Hi @jasonslyvia, thank you for this issue :)

would be nice if we can integrate some animation into this

What is the use case you have in mind here?
You mean that you would like react-placeholder components to come with an optional default animation or that you would like an easier API to apply any custom animation?

[jasonslyvia]

either is okay, but built in animation support seems more desirable to lazy ones like me :P

[Chathula]

Yeas props like animation true/false must be good! set it default to true! :D

I think it is the best approach! :D

[teonimesic]

+1 for this, i was looking for an already made placeholder with some loading animation but didn't find anything ready to use. It surely improves the UX for the user to see an animation indicating that something is still happening / waiting

[FrancescoCioria]

@jasonslyvia I'm having trouble with the solution you proposed as it relies on filling every white space with a div with a white background.
This would add a lot of complexity to the layout of this component.

For starting I was thinking about adding a simpler animation like a pulse animation:

Would this be ok for you guys?

[teonimesic]

Yep, this would be a great starting point

[FrancescoCioria]

I opened a PR, you can see it here if you want :)

[htxiong]

Hey,

I upgraded to 1.0.4 and am still not able to get this nice feature. I tried the code in example and it does not get animation.

<ReactPlaceholder showLoadingAnimation ready={this.state.ready} type="media" rows={mediaBlockRows}>
   <p>This is a Test.</p>
</ReactPlaceholder>

Is there anything I did incorrectly?

Many thanks.

[FrancescoCioria]

Have you forgotten to import the new style file react-placeholder/lib/reactPlaceholder.css in your project.
Unfortunately an infinite animation like this requires the usage of a CSS @keyframe which can't be defined through inline-style.. that's why I had to add a new CSS file.

Let me know if that was the problem, in the meanwhile I'll update the README.md (I just realized I didn't write anywhere about this new CSS file!)

[htxiong]

@FrancescoCioria its working for me after adding css import.

BTW do not you want to apply this animation to other sharp types, e.g rect-sharp?

[FrancescoCioria]

You're right, there's a typo in the CSS: it should be .rect-shape !
I'll open a bug and fix it soon