import {useState, useEffect} from 'react';
import { Box, Typography } from '@mui/material';
import logoSrc from '../../assets/images/amberlogo.png'
import { useSelector } from 'react-redux';


const Loader = () => {

  const products = useSelector((state) => state.products.products.data) // only used as referenced
  const [display, setDisplay] = useState(true)

  useEffect(() => {
    
    if (products.length > 0) {
      setDisplay(false)
    }

  }, [products])
  

  return (
    <Box sx={{
      width: "100%",
      height: "100%",
      backgroundColor: "white",
      top:0,
      left:0,
      position: "fixed",
      display: (display) ? "flex" : "none",
      alignItems:"center",
      justifyContent:"center",
      zIndex: 999
    }}>
      <Box sx={{display:"flex", alignItems:"center"}}>
        <img src={logoSrc} alt="Logo"
          style={{
            width: 150,
            height: 25,
          }} />

        <div className="loader" style={{marginLeft:"20px"}}></div>
      </Box>
    </Box>
  );
};

export default Loader;
