music-player/src/pages/preloader/preloader.js

import logo from "../../logo.png";
import './preloader.css'
import {connect} from "react-redux";


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

const RejectAlert = ({error}) =>
    <div>
        <h2>{error}</h2>
        <img src={logo} alt='logo'/>
    </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)