Lazy loading des composants

This commit is contained in:
Anthony Dumas 2022-07-18 23:57:53 +02:00
parent 8fc22a92d8
commit c1ae173799

View File

@ -1,20 +1,31 @@
import './App.css'; import './App.css';
import './_sass/index.scss'; import './_sass/index.scss';
import MenuComponent from './components/MenuComponent/index'; import { lazy, Suspense } from 'react';
import MainCard from './components/MainCard/MainCard';
import ProjectsCard from './components/ProjectsCard';
import ContactCard from './components/ContactCard'; const MenuComponent = lazy(() => import('./components/MenuComponent/index'));
import FooterCard from './components/FooterCard'; const MainCard = lazy(() => import('./components/MainCard/MainCard'));
const ProjectsCard = lazy(() => import('./components/ProjectsCard'));
const ContactCard = lazy(() => import('./components/ContactCard'));
const FooterCard = lazy(() => import('./components/FooterCard'));
const renderLoader = () => <p>Loading</p>;
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<MenuComponent/> <Suspense fallback={renderLoader()}>
<MainCard/> <MenuComponent />
<ProjectsCard/> </Suspense>
<ContactCard/> <Suspense fallback={renderLoader()}>
<FooterCard/> <MainCard />
</Suspense>
<Suspense fallback={renderLoader()}>
<ProjectsCard />
<ContactCard />
<FooterCard />
</Suspense>
</div> </div>
); );
} }