Animations not working with custom placeholders.

showLoadingAnimation prop not working with custom placeholders.

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

[CyrilKrylatov]

Hi @FrancescoCioria,

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

const awesomePlaceholder = (
    <div>
       <RectShape
         color="#EEEEEE"
         style={{ flexShrink: 0, width: 184, height: 270 }}
       />
       <TextBlock
         rows={7}
         color="#EEEEEE"
       />
     </div>
 );

Then:

return (
  <ReactPlaceholder
    customPlaceholder={awesomePlaceholder}
    ready={false}
    showLoadingAnimation
  >
    <div></div>
  </ReactPlaceholder>
);

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.

[CyrilKrylatov]

@FrancescoCioria thank you very much!

See you.