[Skeleton] Add wave animation support

Author: MariyaVdovenko

docs/pages/api/skeleton.md

@@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">animation</span> | <span class="prop-type">'pulse'<br>&#124;&nbsp;'wave'<br>&#124;&nbsp;false</span> | <span class="prop-default">'pulse'</span> | The animation. If `false` the animation effect is disabled. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">disableAnimate</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true` the animation effect is disabled. |
 | <span class="prop-name">height</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'text'<br>&#124;&nbsp;'rect'<br>&#124;&nbsp;'circle'</span> | <span class="prop-default">'text'</span> | The type of content that will be rendered. |
 | <span class="prop-name">width</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. |
@@ -46,7 +46,8 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">text</span> | <span class="prop-name">.MuiSkeleton-text</span> | Styles applied to the root element if `variant="text"`.
 | <span class="prop-name">rect</span> | <span class="prop-name">.MuiSkeleton-rect</span> | Styles applied to the root element if `variant="rect"`.
 | <span class="prop-name">circle</span> | <span class="prop-name">.MuiSkeleton-circle</span> | Styles applied to the root element if `variant="circle"`.
-| <span class="prop-name">animate</span> | <span class="prop-name">.MuiSkeleton-animate</span> | Styles applied to the root element if `disabledAnimate={false}`.
+| <span class="prop-name">pulse</span> | <span class="prop-name">.MuiSkeleton-pulse</span> | Styles applied to the root element if `animation="pulse"`.
+| <span class="prop-name">wave</span> | <span class="prop-name">.MuiSkeleton-wave</span> | Styles applied to the root element if `animation="wave"`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/src/pages/components/skeleton/Animations.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+export default function Animations() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Skeleton />
+      <Skeleton animation={false} />
+      <Skeleton animation="wave" />
+    </div>
+  );
+}

docs/src/pages/components/skeleton/Animations.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+export default function Animations() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Skeleton />
+      <Skeleton animation={false} />
+      <Skeleton animation="wave" />
+    </div>
+  );
+}

docs/src/pages/components/skeleton/skeleton.md

@@ -22,10 +22,16 @@ For instance:
 
 ## Variants
 
-The component supports 3 variants.
+The component supports 3 shape variants.
 
 {{"demo": "pages/components/skeleton/Variants.js"}}
 
+## Animations
+
+By default, the skeleton pulsate, but you can change the animation for a wave or disable it entirely.
+
+{{"demo": "pages/components/skeleton/Animations.js"}}
+
 ## YouTube example
 
 {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}}

packages/material-ui-lab/src/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '@material-ui/core/Overridab
 
 export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'hr'> {
   props: P & {
-    disableAnimate?: boolean;
+    animation?: 'pulse' | 'wave' | false;
     height?: number | string;
     variant?: 'text' | 'rect' | 'circle';
     width?: number | string;

packages/material-ui-lab/src/Skeleton/Skeleton.js

@@ -28,11 +28,11 @@ export const styles = theme => ({
   circle: {
     borderRadius: '50%',
   },
-  /* Styles applied to the root element if `disabledAnimate={false}`. */
-  animate: {
-    animation: '$animate 1.5s ease-in-out 0.5s infinite',
+  /* Styles applied to the root element if `animation="pulse"`. */
+  pulse: {
+    animation: '$pulse 1.5s ease-in-out 0.5s infinite',
   },
-  '@keyframes animate': {
+  '@keyframes pulse': {
     '0%': {
       opacity: 1,
     },
@@ -43,14 +43,38 @@ export const styles = theme => ({
       opacity: 1,
     },
   },
+  /* Styles applied to the root element if `animation="wave"`. */
+  wave: {
+    position: 'relative',
+    overflow: 'hidden',
+    '&::after': {
+      animation: '$wave 1.5s linear 0.5s infinite',
+      background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)',
+      content: '""',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      zIndex: 1,
+    },
+  },
+  '@keyframes wave': {
+    '0%': {
+      transform: 'translateX(-100%)',
+    },
+    '100%': {
+      transform: 'translateX(100%)',
+    },
+  },
 });
 
 const Skeleton = React.forwardRef(function Skeleton(props, ref) {
   const {
+    animation = 'pulse',
     classes,
     className,
     component: Component = 'div',
-    disableAnimate = false,
     height,
     variant = 'text',
     width,
@@ -64,7 +88,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) {
         classes.root,
         classes[variant],
         {
-          [classes.animate]: !disableAnimate,
+          [classes[animation]]: animation !== false,
         },
         className,
       )}
@@ -79,6 +103,11 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) {
 });
 
 Skeleton.propTypes = {
+  /**
+   * The animation.
+   * If `false` the animation effect is disabled.
+   */
+  animation: PropTypes.oneOf(['pulse', 'wave', false]),
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
@@ -93,10 +122,6 @@ Skeleton.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * If `true` the animation effect is disabled.
-   */
-  disableAnimate: PropTypes.bool,
   /**
    * Height of the skeleton.
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.