<commit_before>import React, {Component} from 'react';
import PropTypes from 'prop-types';
import GraphSpinner from '../fragments/Loading/spinners/GraphSpinner.jsx';
import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
import CircleSpinner from '../fragments/Loading/spinners/CircleSpinner.jsx';
import DotSpinner from '../fragments/Loading/spinners/DotSpinner.jsx';
import {type} from 'ramda';

function getSpinner(spinnerType) {
    switch (spinnerType) {
        case 'graph':
            return GraphSpinner;
        case 'cube':
            return CubeSpinner;
        case 'circle':
            return CircleSpinner;
        case 'dot':
            return DotSpinner;
        default:
            return DefaultSpinner;
    }
}

/**
 * A Loading component that wraps any other component and displays a spinner until the wrapped component has rendered.
 */
export default class Loading extends Component {
    render() {
        const {
            loading_state,
            color,
            className,
            style,
            fullscreen,
            debug,
            type: spinnerType,
        } = this.props;

        if (loading_state && loading_state.is_loading) {
            const Spinner = getSpinner(spinnerType);
            return (
                <Spinner
                    className={className}
                    style={style}
                    status={loading_state}
                    color={color}
                    debug={debug}
                    fullscreen={fullscreen}
                />
            );
        }

        if (
            type(this.props.children) !== 'Object' ||
            type(this.props.children) !== 'Function'
        ) {
            return <div className={className}>{this.props.children}</div>;
        }
        return this.props.children;
    }
}

Loading._dashprivate_isLoadingComponent = true;

Loading.defaultProps = {
    type: 'default',
    color: '#119DFF',
};

Loading.propTypes = {
    /**
     * The ID of this component, used to identify dash components
     * in callbacks. The ID needs to be unique across all of the
     * components in an app.
     */
    id: PropTypes.string,

    /**
     * Array that holds components to render<commit_msg>Ensure that components are still in the DOM when they are loading.<commit_after>import React, {Component} from 'react';
import PropTypes from 'prop-types';
import GraphSpinner from '../fragments/Loading/spinners/GraphSpinner.jsx';
import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
import CircleSpinner from '../fragments/Loading/spinners/CircleSpinner.jsx';
import DotSpinner from '../fragments/Loading/spinners/DotSpinner.jsx';
import {type} from 'ramda';

function getSpinner(spinnerType) {
    switch (spinnerType) {
        case 'graph':
            return GraphSpinner;
        case 'cube':
            return CubeSpinner;
        case 'circle':
            return CircleSpinner;
        case 'dot':
            return DotSpinner;
        default:
            return DefaultSpinner;
    }
}

/**
 * A Loading component that wraps any other component and displays a spinner until the wrapped component has rendered.
 */
export default class Loading extends Component {
    render() {
        const {
            loading_state,
            color,
            className,
            style,
            fullscreen,
            debug,
            type: spinnerType,
        } = this.props;

        if (loading_state && loading_state.is_loading) {
            const Spinner = getSpinner(spinnerType);
            return (
                <div style={{visibility: 'hidden', position: 'relative'}}>
                    {this.props.children}
                    <Spinner
                        className={className}
                        style={{
                            visibility: 'visible',
                            position: 'absolute',
                            top: '0',
                            height: '100%',
                            width: '100%',
                            display: 'flex',
                            'justify-content': 'center',
                            'align-items': 'center',
                            ...style,
                        }}
                        status={loading_state}
                        color={color}
                        debug={debug}
                        fullscreen={fullscreen}
                    />
                </div>
            );
        }

        if (
            type(this.props.children) !== 'Object' ||
            type(this.props.children) !== 'Function'
        ) {
            return <div className={className}>{this.props.children}</div>;
        }
        return this.props.children;
    }
}

Loading._dashprivate_isLoadingComponent = true;

Loading.defaultProps = {
    type: 'default',
    color: '#119DFF',
};

Loading.propTypes = {
    /**
     * The ID of this component, used to identify dash components
     * in callbacks. The ID needs to be unique across all of the
     * components in an app.
     */
    id: PropTypes.string,

    /**
     * Array that holds components to render
{'fraction_non_alphanumeric': 0.100187617260788, 'fraction_numerical': 0.0024390243902439024, 'mean_word_length': 1.6575274177467598, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, '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': '1187305', 'n_tokens_mistral': 1372, 'n_tokens_neox': 1333, 'n_words': 348}