feat: Split string

src/components/App.tsx

@@ -1,6 +1,10 @@
 import {BrowserRouter, useRoutes} from "react-router-dom";
 import routesConfig from "../config/routesConfig";
 import Navbar from "./Navbar";
+import {Suspense} from "react";
+import Loading from "./Loading";
+import {ThemeProvider} from "@mui/material";
+import theme from "../config/muiConfig";
 
 const AppRoutes = () => {
   return useRoutes(routesConfig);
@@ -9,10 +13,14 @@ const AppRoutes = () => {
 function App() {
 
   return (
-    <BrowserRouter>
-      <Navbar/>
-      <AppRoutes/>
-    </BrowserRouter>
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <Navbar/>
+        <Suspense fallback={<Loading/>}>
+          <AppRoutes/>
+        </Suspense>
+      </BrowserRouter>
+    </ThemeProvider>
   )
 }
 

src/components/Loading.tsx

@@ -0,0 +1,53 @@
+import Typography from "@mui/material/Typography";
+import {useState} from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import {useTimeout} from "../hooks";
+
+export type FuseLoadingProps = {
+  delay?: number;
+  className?: string;
+};
+
+/**
+ * FuseLoading displays a loading state with an optional delay
+ */
+function FuseLoading(props: FuseLoadingProps) {
+  const {delay = 0, className} = props;
+  const [showLoading, setShowLoading] = useState(!delay);
+
+  useTimeout(() => {
+    setShowLoading(true);
+  }, delay);
+
+  return (
+    <div
+      className={clsx(
+        className,
+        "flex flex-1 h-full w-full self-center flex-col items-center justify-center p-24",
+        !showLoading ? "hidden" : "",
+      )}
+    >
+      <Typography
+        className="-mb-16 text-13 font-medium sm:text-20"
+        color="text.secondary"
+      >
+        Chargement
+      </Typography>
+      <Box
+        id="spinner"
+        sx={{
+          "& > div": {
+            backgroundColor: "palette.secondary.main",
+          },
+        }}
+      >
+        <div className="bounce1"/>
+        <div className="bounce2"/>
+        <div className="bounce3"/>
+      </Box>
+    </div>
+  );
+}
+
+export default FuseLoading;

src/components/ToolHeader.tsx

@@ -0,0 +1,18 @@
+import {Box, Stack} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import textImage from '../assets/text.png'
+
+interface ToolHeaderProps {
+  title: string;
+  description: string;
+}
+
+export default function ToolHeader({title, description}: ToolHeaderProps) {
+  return (<Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
+    <Box>
+      <Typography mb={2} fontSize={30} color={'primary'}>{title}</Typography>
+      <Typography fontSize={20}>{description}</Typography>
+    </Box>
+    <img width={'20%'} src={textImage}/>
+  </Stack>)
+}

src/components/ToolLayout.tsx

@@ -0,0 +1,7 @@
+import {Box} from "@mui/material";
+import {ReactNode} from "react";
+
+export default function ToolLayout({children}: { children: ReactNode }) {
+  return (<Box width={'100%'} display={'flex'} flexDirection={'column'} alignItems={'center'}><Box
+    width={'85%'}>{children}</Box></Box>)
+}