Create the property holdPlaceholder to keep the placeholder for some …

README.md

@@ -45,7 +45,8 @@ color:                PropTypes.string,
 customPlaceholder:    PropTypes.oneOfType([
                          PropTypes.node,
                          PropTypes.element
-                      ])
+                      ]),
+holdPlaceholder:      PropTypes.number,
 ```
 
 ### Customization
@@ -79,6 +80,9 @@ You can pass an optional `delay` prop which specifies the time (in milliseconds)
 
 Note that this delay will __not__ affect the initial render, only subsequent "ready" state changes. Setting the `firsLaunchOnly` prop to `true` will also disable this feature.
 
+### Hold Placeholder
+You can pass an optional `holdPlaceholder` prop which specifies the time (in milliseconds) `react-placeholder` should keep displaying the placeholder before displaying the content element even if the `ready` prop is `true`. This is useful if you want to keep displaying the placeholder for slower connections while avoiding a brief "flash" on faster connections.
+
 ### Animation
 `react-placeholder` already comes with one default pulse animation to better tell the user that the page is loading.
 The animation is defined in a separate CSS file so, in order to enable it, you should import that style in your project like this:

examples/examples.js

@@ -19,7 +19,8 @@ class Example extends React.Component {
     readyCustom: false,
     readyFirstLaunch: false,
     textBlockRows: 6,
-    mediaBlockRows: 4
+    mediaBlockRows: 4,
+    holdPlaceholder: 2000
   };
 
   onChange = (key) => ({ target: { value } }) => {
@@ -176,6 +177,34 @@ class Example extends React.Component {
           </ReactPlaceholder>
         </div>
 
+        <h1>Using ReactPlaceholder with a hold placeholder time</h1>
+        <button onClick={this.toggleReadyFirstLaunch} style={buttonStyle}>
+          {this.state.readyFirstLaunch ? 'set loading' : 'set ready'}
+        </button>
+        <p>Will show the content only after specified time and it's ready</p>
+        <div className='ui input'>
+          <span style={{ lineHeight: '40px' }}>
+            holdPlaceholder (ms):
+          </span>
+          <input
+            type='number'
+            value={this.state.holdPlaceholder}
+            onChange={this.onChange('holdPlaceholder')}
+            style={{ width: 80, marginLeft: 5 }}
+          />
+        </div>
+        <div className='ui segment'>
+          <ReactPlaceholder
+            ready={this.state.readyFirstLaunch}
+            holdPlaceholder={this.state.holdPlaceholder}
+            rows={4}
+            color='#E0E0E0'
+            className='my-text-block'
+          >
+            {realComponent}
+          </ReactPlaceholder>
+        </div>
+
         <h1>Using ReactPlaceholder with a delay</h1>
         <button onClick={this.toggleReadyFirstLaunch} style={buttonStyle}>
           {this.state.readyFirstLaunch ? 'set loading' : 'set ready'}

src/ReactPlaceholder.js

@@ -19,22 +19,25 @@ export default class ReactPlaceholder extends React.Component {
     customPlaceholder: PropTypes.oneOfType([
       PropTypes.node,
       PropTypes.element
-    ])
+    ]),
+    holdPlaceholder: PropTypes.number
   }
 
   static defaultProps = {
     delay: 0,
     type: 'text',
-    color: '#CDCDCD'
+    color: '#CDCDCD',
+    holdPlaceholder: 0
   }
 
   state = {
-    ready: this.props.ready
+    ready: this.props.ready,
+    holdPlaceholder: this.props.holdPlaceholder > 0
   }
 
   getFiller = () => {
     const {
-      firstLaunchOnly, children, ready, className, // eslint-disable-line no-unused-vars
+      firstLaunchOnly, children, ready, className, holdPlaceholder, // eslint-disable-line no-unused-vars
       type, customPlaceholder, showLoadingAnimation, ...rest
     } = this.props;
 
@@ -80,14 +83,28 @@ export default class ReactPlaceholder extends React.Component {
   }
 
   render() {
-    return this.state.ready ? this.props.children : this.getFiller();
+    const { ready, holdPlaceholder } = this.state;
+    return ready && !holdPlaceholder ? this.props.children : this.getFiller();
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!this.props.firstLaunchOnly && this.state.ready && !nextProps.ready) {
-      this.setNotReady();
+    if (!this.props.firstLaunchOnly && !nextProps.ready) {
+      if (this.state.ready) {
+        this.setNotReady();
+      }
+      if (this.props.holdPlaceholder) {
+        clearTimeout(this.holdPlaceholderTimeout);
+        this.setState({ holdPlaceholder: true });
+        this.holdPlaceholderTimeout = setTimeout(() => this.setState({ holdPlaceholder: false }), nextProps.holdPlaceholder);
+      }
     } else if (nextProps.ready) {
       this.setReady();
     }
   }
+
+  componentWillMount() {
+    if (this.props.holdPlaceholder > 0) {
+      this.holdPlaceholderTimeout = setTimeout(() => this.setState({ holdPlaceholder: false }), this.props.holdPlaceholder);
+    }
+  }
 }

src/index.d.ts

@@ -10,7 +10,8 @@ interface ReactPlaceholderProps {
   rows?: number,
   color?: string,
   showLoadingAnimation?: boolean,
-  customPlaceholder?: ReactNode | ReactElement<any>
+  customPlaceholder?: ReactNode | ReactElement<any>,
+  holdPlaceholder?: number,
 }
 
 interface ReactPlaceholderState {

tests/ReactPlaceholder.test.js

@@ -53,4 +53,51 @@ describe('ReactPlaceholder', () => {
     expect(tree.getElements()).toMatchSnapshot();
   });
 
+  it('renders the placeholder for a while even if the content is ready', () => {
+    const content = <div>Some ready content</div>;
+    const tree = shallow(
+      <ReactPlaceholder
+        ready
+        type='text'
+        rows={2}
+        holdPlaceholder={10000}
+      >
+        {content}
+      </ReactPlaceholder>
+    );
+    expect(tree.contains(content)).toBe(false);
+    jest.runAllTimers();
+    tree.update();
+    expect(tree.contains(content)).toBe(true);
+    expect(tree.getElements()).toMatchSnapshot();
+  });
+
+  it('renders the placeholder again for a while even if the content is ready', () => {
+    const content = <div>Some ready content</div>;
+    const tree = shallow(
+      <ReactPlaceholder
+        ready
+        type='text'
+        rows={2}
+        holdPlaceholder={10000}
+      >
+        {content}
+      </ReactPlaceholder>
+    );
+    expect(tree.contains(content)).toBe(false);
+    jest.runAllTimers();
+    tree.update();
+    expect(tree.contains(content)).toBe(true);
+    tree.setProps({ ready: false });
+    tree.update();
+    expect(tree.contains(content)).toBe(false);
+    tree.setProps({ ready: true });
+    tree.update();
+    expect(tree.contains(content)).toBe(false);
+    jest.runAllTimers();
+    tree.update();
+    expect(tree.contains(content)).toBe(true);
+    expect(tree.getElements()).toMatchSnapshot();
+  });
+
 });

tests/__snapshots__/ReactPlaceholder.test.js.snap

@@ -8,6 +8,22 @@ Array [
 ]
 `;
 
+exports[`ReactPlaceholder renders the placeholder again for a while even if the content is ready 1`] = `
+Array [
+  <div>
+    Some ready content
+  </div>,
+]
+`;
+
+exports[`ReactPlaceholder renders the placeholder for a while even if the content is ready 1`] = `
+Array [
+  <div>
+    Some ready content
+  </div>,
+]
+`;
+
 exports[`ReactPlaceholder renders the placeholder only after the specified delay 1`] = `
 Array [
   <TextBlock