react-placeholder - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

CHANGELOG.md

@@ -5,2 +5,10 @@ #  Change Log
 
+## [v1.0.8](https://github.com/buildo/react-placeholder/tree/v1.0.8) (2017-10-25)
+[Full Changelog](https://github.com/buildo/react-placeholder/compare/v1.0.7...v1.0.8)
+
+#### New features:
+
+- Add "delay" prop to show the placeholder for a minimum time [#49](https://github.com/buildo/react-placeholder/issues/49)
+- React 16 warning message [#46](https://github.com/buildo/react-placeholder/issues/46)
+
 ## [v1.0.7](https://github.com/buildo/react-placeholder/tree/v1.0.7) (2017-10-16)
@@ -7,0 +15,0 @@ [Full Changelog](https://github.com/buildo/react-placeholder/compare/v1.0.6...v1.0.7)

lib/index.d.ts

@@ -7,2 +7,3 @@ import { ComponentClass, ReactChild, ReactNode, ReactElement } from 'react';
   ready: boolean,
+  delay: number,
   firstLaunchOnly?: boolean,
@@ -9,0 +10,0 @@ type?: 'text' |  'media' | 'textRow' | 'rect' | 'round',

lib/ReactPlaceholder.js

@@ -54,4 +54,2 @@ 'use strict';
       ready: _this.props.ready
-    }, _this.isReady = function () {
-      return _this.props.firstLaunchOnly ? _this.state.ready : _this.props.ready;
     }, _this.getFiller = function () {
@@ -84,2 +82,21 @@ var _this$props = _this.props,
       return _react2.default.createElement(Placeholder, _extends({}, rest, { className: classes }));
+    }, _this.setNotReady = function () {
+      var delay = _this.props.delay;
+
+
+      if (delay > 0) {
+        _this.timeout = setTimeout(function () {
+          _this.setState({ ready: false });
+        }, delay);
+      } else {
+        _this.setState({ ready: false });
+      }
+    }, _this.setReady = function () {
+      if (_this.timeout) {
+        clearTimeout(_this.timeout);
+      }
+
+      if (!_this.state.ready) {
+        _this.setState({ ready: true });
+      }
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -91,3 +108,3 @@ }
     value: function render() {
-      return this.isReady() ? this.props.children : this.getFiller();
+      return this.state.ready ? this.props.children : this.getFiller();
     }
@@ -97,6 +114,6 @@ }, {
     value: function componentWillReceiveProps(nextProps) {
-      if (!this.state.ready) {
-        this.setState({
-          ready: nextProps.ready
-        });
+      if (!this.props.firstLaunchOnly && this.state.ready && !nextProps.ready) {
+        this.setNotReady();
+      } else if (nextProps.ready) {
+        this.setReady();
       }
@@ -109,2 +126,3 @@ }
   children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.element]).isRequired,
+  delay: _propTypes2.default.number,
   ready: _propTypes2.default.bool.isRequired,
@@ -118,2 +136,3 @@ firstLaunchOnly: _propTypes2.default.bool,
 }, _class.defaultProps = {
+  delay: 0,
   type: 'text',
@@ -120,0 +139,0 @@ color: '#CDCDCD'

package.json

 {
   "name": "react-placeholder",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A React component to easily replicate your page with nice placeholders while the content is loading",
@@ -5,0 +5,0 @@ "main": "lib",

README.md

@@ -39,2 +39,3 @@ # React Placeholder
 ready:                PropTypes.bool.isRequired,
+delay:                PropTypes.number,
 firstLaunchOnly:      PropTypes.bool,
@@ -77,2 +78,7 @@ showLoadingAnimation: PropTypes.bool,
 
+### Delay
+You can pass an optional `delay` prop which specifies the time (in milliseconds) `react-placeholder` should wait before displaying the placeholder element. This is useful if you want to show a placeholder for slower connections while avoiding a brief "flash" on faster connections.
+
+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.
+
 ### Animation
@@ -79,0 +85,0 @@ `react-placeholder` already comes with one default pulse animation to better tell the user that the page is loading.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39316

increased by3.7%

Lines of code

500

increased by3.52%

Number of lines in readme file

104

increased by6.12%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes