MAJ systel lazyload

frontend/src/components/Faq.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Box, TextField, Typography, Collapse, CircularProgress } from "@mui/material";
 import axios from "axios";
 
+
 const Faq = ({ showFAQ }) => {
   const [faqSearch, setFaqSearch] = useState("");
   const [filteredFaqs, setFilteredFaqs] = useState([]);

frontend/src/components/Pages/Contact.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import {
   Box,
   TextField,
@@ -19,6 +19,7 @@ import {
 import SEO from "../SEO";
 import api from "../../api";
 import Faq from "../Faq";
+const FAQ = lazy(() => import('../Faq'));
 
 const Contact = () => {
   const [metaTitle, setMetaTitle] = useState("Contactez-nous");
@@ -158,6 +159,7 @@ const Contact = () => {
           <Typography
             variant="h1"
             sx={{
+              color: "#000",
               fontWeight: "bold",
               fontSize: { xs: "2rem", md: "3rem", lg: "4rem" },
               mb: 2,
@@ -168,6 +170,7 @@ const Contact = () => {
           <Typography
             variant="body2"
             sx={{
+              color: "#000",
               fontSize: { xs: "1rem", md: "1rem" },
               maxWidth: "600px",
               mx: "auto",
@@ -376,8 +379,9 @@ const Contact = () => {
       </Box>
 
       {/* Section FAQ */}
+      <Suspense fallback={<div>Chargement...</div>}>
       <Faq showFAQ={showFAQ} />
-
+      </Suspense>
       {/* Formulaire de contact */}
       <Box
         sx={{

frontend/src/main.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React,{ lazy, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
@@ -7,11 +7,15 @@ import { HelmetProvider } from "react-helmet-async";
 import  SimpleReactLightbox  from "simple-react-lightbox";
 
 
+// Lazy loading des pages
+const Home = lazy(() => import('./components/pages/Home.jsx'));
+const About = lazy(() => import('./components/Pages/About'));
+const Contact = lazy(() => import('./components/Pages/Contact'));
 
-import Home from "./components/Pages/Home.jsx";
+// import Home from "./components/Pages/Home.jsx";
 import Post from "./components/Pages/Post";
-import About from "./components/Pages/About";
-import Contact from "./components/Pages/Contact";
+// import About from "./components/Pages/About";
+// import Contact from "./components/Pages/Contact";
 import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
 import Header from "./components/Header";