<commit_before>/* eslint react/no-set-state:0 */

import './LoadingBar.css';
import React, { Component, PropTypes } from 'react';
import shallowCompare from 'react-addons-shallow-compare';

const autoUpdateInterval = 250;
const firstPercentage = 0.55;

class LoadingBar extends Component {
    constructor(props) {
        super(props);
        this.state = { percentage: 0 };
    }

    componentDidMount() {
        this._update();
    }

    shouldComponentUpdate(nextProps, nextState) {
        return shallowCompare(this, nextProps, nextState);
    }

    componentDidUpdate() {
        this._update();
    }

    componentWillUnmount() {
        if (this._interval) {
            clearInterval(this._interval);
            this._interval = null;
        }
    }

    render() {
        const hasFinished = this.state.percentage === 1;
        const className = `loading-bar-component ${hasFinished ? 'is-finished' : ''} ${this.state.instant ? 'disable-transition' : ''}`;
        const style = {
            transform: `scaleX(${this.state.percentage})`,
            opacity: this.state.percentage === 1 ? '0' : '1',
        };

        return (
            <div className={ className } style={ style } />
        );
    }

    // ------------------------------------------------------

    _update() {
        if (this.props.running) {
            this._start();
        } else {
            this._finish();
        }
    }

    _start() {
        if (this._interval) {
            return;
        }

        this._interval = setInterval(() => this._autoIncrement(), autoUpdateInterval);

        this.setState({ percentage: 0, instant: true }, () => {
            setTimeout(() => this.props.running && this.setState({ percentage: firstPercentage, instant: false }), 0);
        });
    }

    _finish() {
        if (!this._interval) {
            return;
        }

        this.setState({ percentage: 1, instant: false });

        clearInterval(this._interval);
        this._interval = null;
    }

    _autoIncrement() {
        let percentage = this.state.percentage + Math.min(0.8, (1 - this.state.percentage) / 10);

        if (percentage > 0.95) {
            percentage = 0.95;
            clearInterval(this._interval);
        }

        this.setState({ percentage, instant: false });
    }
}

LoadingBar.propTypes = {
    running: PropTypes.bool.isRequired,
};

export default LoadingBar;
<commit_msg>Fix minor bugs with the top loading bar.<commit_after>/* eslint react/no-set-state:0 */

import './LoadingBar.css';
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import shallowCompare from 'react-addons-shallow-compare';

const autoUpdateInterval = 250;
const firstPercentage = 0.55;

class LoadingBar extends Component {
    constructor(props) {
        super(props);
        this.state = { percentage: 0 };
    }

    componentWillMount() {
        this._update(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this._update(nextProps);
    }

    shouldComponentUpdate(nextProps, nextState) {
        return shallowCompare(this, nextProps, nextState);
    }

    componentWillUnmount() {
        if (this._interval) {
            clearInterval(this._interval);
            this._interval = null;
        }
    }

    render() {
        const style = {
            transform: `scaleX(${this.state.percentage})`,
            opacity: this.state.percentage === 1 ? '0' : '1',
        };

        return (
            <div className={ `loading-bar-component ${this.state.instant ? 'disable-transition' : ''}` } style={ style } />
        );
    }

    // ------------------------------------------------------

    _update(props) {
        if (props.running) {
            this._start();
        } else {
            this._finish();
        }
    }

    _start() {
        if (this._interval) {
            return;
        }

        this._interval = setInterval(() => this._autoIncrement(), autoUpdateInterval);

        this.setState({ percentage: 0, instant: true }, () => {
            if (!this.props.running) {
                return;
            }

            // Reflow, so that the disable-transition has been applied
            ReactDOM.findDOMNode(this).offsetHeight;  // eslint-disable-line no-unused-expressions
            this.setState({ percentage: firstPercentage, instant: false });
        });
    }

    _finish() {
        if (!this._interval) {
            return;
        }

        clearInterval(this._interval);
        this._interval = null;

        this.setState({ percentage: 1, instant: false });
    }

    _autoIncrement() {
        let percentage = this.state.percentage + Math.min(0.8, (1 - this.state.percentage) / 10);

        if (percentage > 0.95) {
            percentage = 0.95;
            clearInterval(this._interval);
        }

        this.setState({ percentage, instant: false });
    }
}

LoadingBar.propTypes = {
    running: PropTypes.bool.isRequired,
};

export default LoadingBar;

{'fraction_non_alphanumeric': 0.15258964143426296, 'fraction_numerical': 0.0099601593625498, 'mean_word_length': 1.8889528193325662, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 12, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2641032', 'n_tokens_mistral': 1432, 'n_tokens_neox': 1376, 'n_words': 285}