import './preloader.css'
import {connect} from "react-redux";
import {LogoLarge} from "../header";


export const Preloader = () =>
    <div className="loadingio-spinner-eclipse-leb3x7lyjtj">
        <div className="ldio-vhhfhwlovld">
            <div></div>
        </div>
    </div>

const RejectAlert = () =>
    <div>
        <LogoLarge/>
    </div>

export const Preloaded = ({promiseName, promiseState, children}) =>
    <>
        {promiseState[promiseName]?.status === 'RESOLVED' ? children :
            promiseState[promiseName]?.status === 'REJECTED' ?
                <RejectAlert error={promiseState[promiseName]?.error}/>:
                <Preloader/>}
    </>

export const CPreloaded = connect(state => ({promiseState: state.promise}))(Preloaded)