@modus/react-idle/dist/es/index.js

Render components when browser is idle

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/**
 * React Idle v1.1.1
 * (c) Modus Create
 * MIT Licensed
 * https://labs.moduscreate.com
 */

import * as React from 'react';
import { IdleQueue } from 'idlize/IdleQueue.mjs';

// Initialize the global queue manager
var queue = new IdleQueue();

// Let's see if this is a browser or node (server side rendering)
var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

var OnIdle = function (_React$Component) {
  _inherits(OnIdle, _React$Component);

  function OnIdle() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, OnIdle);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = OnIdle.__proto__ || _Object$getPrototypeOf(OnIdle)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      ready: false
    }, _this.job = null, _this.clearJob = function () {
      // Remove this task from the global queue
      queue.unshiftTask(_this.queueRendering);
    }, _this.requestIdle = function () {
      // Clear the existing job if exists to avoid duplicates
      _this.clearJob();
      if (_this.props.skipSSR !== true) {
        // Queue up
        _this.job = queue.pushTask(_this.queueRendering);
      }
    }, _this.queueRendering = function () {
      // We request animation frame so that rendering doesn't happen during another ongoing process
      requestAnimationFrame(_this.readyToRender);
    }, _this.readyToRender = function () {
      _this.setState({
        ready: true
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(OnIdle, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.requestIdle();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // We will render updates onIdle, unless this.props.syncUpdate is true
      if (!this.props.syncUpdate && this.props.children !== nextProps.children) {
        this.setState({ ready: false });
        this.requestIdle();
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      // Call the onRender function (if it exists) after the children have been rendered
      if (!prevState.ready && this.state.ready && typeof this.props.onRender === 'function') {
        this.props.onRender();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      // Cleanup
      this.clearJob();
    }

    // Render when DOM is ready, not earlier

  }, {
    key: 'render',
    value: function render() {
      // Don't render anything if we are skipping SSR
      if ((process.env.NODE_ENV === 'test' && '__SSR__' in window && window.__SSR__ || !isBrowser) && this.props.skipSSR) {
        return null;
      }

      return this.state.ready ? this.props.children : this.props.placeholder || null;
    }
  }]);

  return OnIdle;
}(React.Component);

OnIdle.defaultProps = {
  placeholder: null
};


export default OnIdle;