Lazy loading des composants

src/App.js

@@ -1,20 +1,31 @@
 import './App.css';
 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() {
   return (
     <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>
   );
 }