Big shift: use mask + css gradient instead of SVG Animation

[danilowoz]

Summary

The current approach uses a mix of masking, SVG-LinearGradient and SVG-Animation, but it always seems slower (more in #125) than other alternatives like CSS gradient + CSS animations. Also, SVG doesn't provide the best API possible to handle even with the small changes, like the interval between animation. But on another hand, CSS animation is an amazing solution for animations and how to handle it.

The biggest advantages I can see here about this new approach:

• Low CPU usage in my testes;
• Better API;
• Bring new possibilities, like different kind of animations;
• Smallest bundle;

Otherwise, assuming that the new approach needs to render somehow a style tag - in order to set the animation - it needs to use the dangerouslySetInnerHTML prop or even a third-party to set in the head scope (which would be the worst case).

Other disadvantages:

• Responsiveness: the Rect element is not able to stretch to SVG's sizes, then it doesn't cover all css gradient

<div style={{ width: 400, height: 400, border: '1px solid #eee' }}>
   <Code style={{ width: '100%', height: '100%' }} />
</div>

• Background color: as the Rect has background color white, it covers the background of the page:

Before	After

Any Breaking Changes

TODO

The following props were deprecated:

• Interval:
• backgroundColorOpacity
• foregroundColorOpacity
• baseUrl
• Responsiveness

How to test

npm i react-content-loader@beta

[danilowoz]

@steffen-harbich-cognitum it might be of interest to you