Add delay prop and prettier config

Author: brybrophy

demo/app.js

@@ -31,13 +31,13 @@ const textContainerStyle = {
   position: 'absolute',
   right: 0,
   top: 0
-}
+};
 
 const textStyle = {
   color: '#fff',
   fontFamily: 'sans-serif',
   fontSize: '2.5em',
-  textTransform: 'uppercase',
+  textTransform: 'uppercase'
 };
 
 class App extends React.Component {
@@ -51,20 +51,20 @@ class App extends React.Component {
             Image
           </h1>
         </div>
-        <ProgressiveImage 
-          src={MD} 
-          placeholder={inline} 
+        <ProgressiveImage
+          src={MD}
+          placeholder={inline}
           srcSetData={{
             srcSet: `${SM} 320w, ${MD} 700w, ${LG} 2000w`,
-            sizes: "(max-width: 2000px) 100vw, 2000px"
+            sizes: '(max-width: 2000px) 100vw, 2000px'
           }}
         >
           {(image, loading, srcSetData) => {
             return (
-              <img 
-                style={imageStyle} 
-                src={image} 
-                srcSet={srcSetData.srcSet} 
+              <img
+                style={imageStyle}
+                src={image}
+                srcSet={srcSetData.srcSet}
                 sizes={srcSetData.sizes}
               />
             );

prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: "none"
+};

src/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import * as React from "react";
+import * as React from 'react';
 
 type SrcSetData = {
   srcSet: string,
@@ -9,6 +9,7 @@ type SrcSetData = {
 
 type Props = {
   children: (string, boolean, SrcSetData) => React.Node,
+  delay?: number,
   onError?: (errorEvent: Event) => void,
   placeholder: string,
   src: string,
@@ -28,7 +29,7 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     this.state = {
       image: props.placeholder,
       loading: true,
-      srcSetData: { srcSet: "", sizes: "" }
+      srcSetData: { srcSet: '', sizes: '' }
     };
   }
 
@@ -78,14 +79,16 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     // avoid the possibility of props being updated and the
     // new image loading before the new props are available as
     // this.props.
-    this.setState({
-      image: this.image.src,
-      loading: false,
-      srcSetData: {
-        srcSet: this.image.srcset || "",
-        sizes: this.image.sizes || ""
-      }
-    });
+    setTimeout(() => {
+      this.setState({
+        image: this.image.src,
+        loading: false,
+        srcSetData: {
+          srcSet: this.image.srcset || '',
+          sizes: this.image.sizes || ''
+        }
+      });
+    }, this.props.delay || 0);
   };
 
   onError = (errorEvent: Event) => {
@@ -99,7 +102,7 @@ export default class ProgressiveImage extends React.Component<Props, State> {
     const { image, loading, srcSetData } = this.state;
     const { children } = this.props;
 
-    if (!children || typeof children !== "function") {
+    if (!children || typeof children !== 'function') {
       throw new Error(`ProgressiveImage requires a function as its only child`);
     }