insomnia/app/ui/components/response-timer.js

import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import classnames from 'classnames';
import {REQUEST_TIME_TO_SHOW_COUNTER} from '../../common/constants';

@autobind
class ResponseTimer extends PureComponent {
  constructor (props) {
    super(props);
    this._interval = null;
    this.state = {
      elapsedTime: 0
    };
  }

  componentWillUnmount () {
    clearInterval(this._interval);
  }

  _handleUpdateElapsedTime () {
    const {loadStartTime} = this.props;
    const millis = Date.now() - loadStartTime - 200;
    const elapsedTime = Math.round(millis / 1000);
    this.setState({elapsedTime});
  }

  componentDidUpdate () {
    const {loadStartTime} = this.props;

    if (loadStartTime <= 0) {
      clearInterval(this._interval);
      return;
    }

    clearInterval(this._interval); // Just to be sure
    this._interval = setInterval(this._handleUpdateElapsedTime, 1000);
    this._handleUpdateElapsedTime();
  }

  render () {
    const {handleCancel, loadStartTime} = this.props;
    const {elapsedTime} = this.state;

    const show = loadStartTime > 0;

    return (
      <div className={classnames('overlay theme--overlay', {'overlay--hidden': !show})}>
        {elapsedTime >= REQUEST_TIME_TO_SHOW_COUNTER
          ? <h2>{elapsedTime} second{elapsedTime === 1 ? '' : 's'}...</h2>
          : <h2>Loading...</h2>
        }
        <div className="pad">
          <i className="fa fa-refresh fa-spin"/>
        </div>
        <div className="pad">
          <button className="btn btn--clicky" onClick={handleCancel}>
            Cancel Request
          </button>
        </div>
      </div>
    );
  }
}

ResponseTimer.propTypes = {
  handleCancel: PropTypes.func.isRequired,
  loadStartTime: PropTypes.number.isRequired
};

export default ResponseTimer;