import './styles.scss'
import AboutHero from './AboutHero/index';
import TrastedPartners from 'components/Sections/TrastedPartners';
import AboutUsSection from 'components/Sections/AboutUs';
import OurVision from './OurVision';
import Team from './AboutTeam';
import Career from './Career';
import { useSelector, useDispatch } from 'react-redux';
import {
    selectAboutUsPartners,
    selectAboutUsAbout,
    fetchAboutUs,
    selectAboutUsIsLoading,
} from 'store/slices/AboutSlice';
import { useEffect, useState } from 'react';
import { useImageLoaded } from 'hooks/useImageLoaded';
// import Preloader from 'Layout/Preloader';

const AboutUs = () => {
    const dispatch = useDispatch();
    const [isLoading, setIsLoading] = useState(true);
    const isAboutUsLoading = useSelector(selectAboutUsIsLoading);
    const isLoadedImages = useImageLoaded();
    const partners = useSelector(selectAboutUsPartners);
    const aboutus = useSelector(selectAboutUsAbout);



    useEffect(() => {
        // @ts-ignore
        dispatch(fetchAboutUs());
    }, [dispatch]);

    useEffect(() => {
        if (isLoadedImages && !isAboutUsLoading) {
            setIsLoading(false)
        }
    }, [isLoadedImages, isAboutUsLoading]);

    return !isAboutUsLoading && (
        <>
            <AboutHero />
            <TrastedPartners data={partners} isLoading={isLoading} />
            <AboutUsSection aboutUs={aboutus} isLoading={isLoading} />
            <OurVision isLoading={isLoading} />
            <Team isLoading={isLoading} />
            <Career isLoading={isLoading} />
        </>
    );
}

export default AboutUs;

• [D] AboutHero
• [D] AboutTeam
• [D] Career
• [D] OurVision
• [F] index.jsx
  Delete
• [F] styles.scss
  Delete