Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animations not working with custom placeholders.

See original GitHub issue

showLoadingAnimation prop not working with custom placeholders.

render() {
   <ReactPlaceholder showLoadingAnimation ready={ready} customPlaceholder={<TextRow />}>
           <div className={bodyClasses}>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

CyrilKrylatovcommented, Jul 3, 2017

Hi @FrancescoCioria,

It was indeed with react-placeholder’s exported components, like this:

const awesomePlaceholder = (
         style={{ flexShrink: 0, width: 184, height: 270 }}


return (

Please don’t mind the empty DIV tag that will have my loaded component, it’s just a test case here.

So as you can see, I tried to make the showLoadingAnimation working but it seems like it won’t load the className in the DOM if we have custom markup.

So the workaround until the bug is fixed: I added a className="show-loading-animation" to my wrapper in my const and copy/paste your keyframes in one of my CSS files.

That’s it!

I hope my answer is clear, my english is pretty bad.

Thank you for your job and have a nice day.

CyrilKrylatovcommented, Jul 3, 2017

@FrancescoCioria thank you very much!

See you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Animation for Placeholder Not Running - Stack Overflow
The curious thing is if I put the css attribute for opacity directly in the placeholder SCSS class it works fine. input {...
Read more >
Camtasia - Re-use Custom Animations With Placeholders
In this video, we take a custom animation and turn it into a placeholder, to use it again and again.
Read more >
Animations made on the Slide Master Work, but are not visible ...
If the shapes with animation on the master are not placeholders then you won't see them listed in the animation pane in slide...
Read more >
Additional patterns: animated placeholders | Algolia
This guide uses InstantSearch.js to animate placeholder text. Animated placeholders mimic the effect of typing queries in a passive search box.
Read more >
Glide — Placeholders & Fade Animations - Future Studio
Transitions. No matter if you're displaying a placeholder before loading the image or not, changing an image of an ImageView is a pretty ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found