glass-app-manager/target/.yalc/@informatica/droplets-core/src/components/loader/Loader.js

Informatica's Glass Framework CLI for bootstrapping

// @flow

import React, { Component } from "react";

type Props = {
    /**
     * Set true to show a darker loading mask.
     */
    darken?: boolean,

    /**
     * Set true to show a lighter loading mask.
     */
    lighten?: boolean,

    /**
     * The number of ms to wait before showing the loading
     * mask.
     */
    delayShowTimeout?: number,

    /**
     * The message to show after `delayedTimeout`.
     */
    delayedMessage?: string,

    /**
     * The number of ms to wait before showing the `delayedMessage`.
     */
    delayedTimeout?: number,

    /**
     * The error message to show after `errorTimeout`.
     */
    errorMessage?: string,

    /**
     * The number of ms to wait before showing the `errorMessage`.
     */
    errorTimeout?: number,

    /**
     * The message to show the user when the loading mask initially renders.
     */
    message?: string,
};

export default class Loader extends Component<
    Props,
    {
        show: boolean,
        showDelayed: boolean,
        showError: boolean,
    }
> {
    static defaultProps = {
        lighten: false,
        darken: false,
        delayedMessage: "This is taking longer than expected...",
        message: "Loading...",
    };

    delayedTimer = null;
    errorTimer = null;
    showTimer = null;

    state = {
        show: false,
        showDelayed: false,
        showError: false,
    };

    componentDidMount() {
        if (this.props.delayedTimeout) {
            this.delayedTimer = setTimeout(() => {
                this.delayedTimer = null;
                this.setState({ showDelayed: true });
            }, this.props.delayedTimeout);
        }

        if (this.props.errorTimeout) {
            this.errorTimer = setTimeout(() => {
                this.errorTimer = null;
                this.setState({ showError: true });
            }, this.props.errorTimeout);
        }

        if (!this.props.delayShowTimeout) {
            this.setState({ show: true });
        } else {
            this.showTimer = setTimeout(() => {
                this.showTimer = null;
                this.setState({ show: true });
            }, this.props.delayShowTimeout);
        }
    }

    componentWillUnmount() {
        if (this.delayedTimer) {
            clearTimeout(this.delayedTimer);
        }

        if (this.errorTimer) {
            clearTimeout(this.errorTimer);
        }

        if (this.showTimer) {
            clearTimeout(this.showTimer);
        }
    }

    getMessage = () => {
        if (this.state.showError && this.props.errorMessage) {
            return this.props.errorMessage;
        }

        if (this.state.showDelayed) {
            return this.props.delayedMessage;
        }

        return this.props.message;
    };

    render() {
        if (!this.state.show) {
            return null;
        }

        return (
            <div
                className={[
                    "loader",
                    this.props.darken ? "loader--darken" : null,
                    this.props.lighten ? "loader--lighten" : null,
                ].join(" ")}>
                <div className="loader__spinner">
                    <div className="sk-fading-circle">
                        <div className="sk-circle1 sk-circle" />
                        <div className="sk-circle2 sk-circle" />
                        <div className="sk-circle3 sk-circle" />
                        <div className="sk-circle4 sk-circle" />
                        <div className="sk-circle5 sk-circle" />
                        <div className="sk-circle6 sk-circle" />
                        <div className="sk-circle7 sk-circle" />
                        <div className="sk-circle8 sk-circle" />
                        <div className="sk-circle9 sk-circle" />
                        <div className="sk-circle10 sk-circle" />
                        <div className="sk-circle11 sk-circle" />
                        <div className="sk-circle12 sk-circle" />
                    </div>
                </div>
                <div className="loader__message">{this.getMessage()}</div>
            </div>
        );
    }
}