import React, {useEffect, useState} from 'react';
import {Blocks} from "react-loader-spinner";
import {LoadingDiv} from "./Loading.style";

function Loading ({loadingState}) {
    const [visible, setVisible] = useState(loadingState);

    useEffect(() => {
        setVisible(loadingState)
    }, [loadingState]);

    return (
        <LoadingDiv $visible={visible}>
            <Blocks
                height="150"
                width="150"
                ariaLabel="blocks-loading"
                wrapperStyle={{}}
                wrapperClass="blocks-wrapper"
            />
        </LoadingDiv>
    ) ;
};

export default Loading;