Enabler.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Loading } from 'components';


export default class Enabler extends Component {
    static propTypes = {
        children: PropTypes.node.isRequired,
        /**
         * Bootstrap function to run.
         * You should wrap this function in a "once()". It will be called on every componentDidMount.
         * This function can return either async (Promises) or sync values.
         */
        bootstrap: PropTypes.func.isRequired,
    }
    constructor() {
        super();

        this.state = {
            ready: false,
            error: null,
        };
    }
    componentDidMount() {
        // Wrapper in Promise.resolve, so we can resolve
        // non-Promises in an async manner as well.
        Promise.resolve(this.props.bootstrap())
            .then(() => {
                this.setState({
                    ready: true,
                });
            })
            .catch((err) => {
                console.error('An error occurred while enabling.', err);
                this.setState({
                    err,
                });
            });
    }
    render() {
        if (this.state.err) return null;

        return this.state.ready === true
            ? this.props.children
            : <Loading />;
    }
}