[Skeleton] Delay the animation by 500ms

docs/pages/api/skeleton.md

@@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">animationDelay</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Delays the animation of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of phase. |
 | <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. |

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+export default function Variants() {
+  return (
+    <div>
+      <Skeleton variant="rect" width={210} height={118} />
+      <Skeleton
+        variant="rect"
+        width={210}
+        height={118}
+        animationDelay="0.1s"
+        style={{ marginTop: 5 }}
+      />
+      <Skeleton
+        variant="rect"
+        width={210}
+        height={118}
+        animationDelay="0.2s"
+        style={{ marginTop: 5 }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+export default function Variants() {
+  return (
+    <div>
+      <Skeleton variant="rect" width={210} height={118} />
+      <Skeleton
+        variant="rect"
+        width={210}
+        height={118}
+        animationDelay="0.1s"
+        style={{ marginTop: 5 }}
+      />
+      <Skeleton
+        variant="rect"
+        width={210}
+        height={118}
+        animationDelay="0.2s"
+        style={{ marginTop: 5 }}
+      />
+    </div>
+  );
+}

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

@@ -33,3 +33,7 @@ The component supports 3 variants.
 ## Facebook example
 
 {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}}
+
+## Delay example
+
+{{"demo": "pages/components/skeleton/Delay.js", "defaultCodeOpen": false}}

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

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

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

@@ -31,6 +31,7 @@ export const styles = theme => ({
   /* Styles applied to the root element if `disabledAnimate={false}`. */
   animate: {
     animation: '$animate 1.5s ease-in-out infinite',
+    animationDelay: '0.5s',
   },
   '@keyframes animate': {
     '0%': {
@@ -47,6 +48,7 @@ export const styles = theme => ({
 
 const Skeleton = React.forwardRef(function Skeleton(props, ref) {
   const {
+    animationDelay,
     classes,
     className,
     component: Component = 'div',
@@ -72,13 +74,19 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) {
       style={{
         width,
         height,
+        animationDelay,
         ...other.style,
       }}
     />
   );
 });
 
 Skeleton.propTypes = {
+  /**
+   * Delays the animation of the skeleton.
+   * Useful when you have multiple skeletons, and need them to pulse out of phase.
+   */
+  animationDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.