From c785c80735674401fdba9d7625820312b5ed1f67 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 17 Feb 2024 17:38:18 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(App):lazy=20load?=
 =?UTF-8?q?=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 39 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6617473..c1aba46 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,53 @@
+import React from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { Backdrop, CircularProgress } from '@mui/material'
 
-import { MainPage, ContactPage, ErrorPage, CurriculumPage, ProjectsPage } from 'components/pages'
+import { ErrorPage } from 'components/pages'
+
+const MainPage = React.lazy(() => import('components/pages/MainPage'))
+const ProjectsPage = React.lazy(() => import('components/pages/ProjectsPage'))
+const CurriculumPage = React.lazy(() => import('components/pages/CurriculumPage'))
+const ContactPage = React.lazy(() => import('components/pages/ContactPage'))
+
+const Loading = () => (
+  <Backdrop open={true} aria-label="loading-screen">
+    <CircularProgress />
+  </Backdrop>
+)
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <MainPage />,
+    element: (
+      <React.Suspense fallback={<Loading />}>
+        <MainPage />
+      </React.Suspense>
+    ),
     errorElement: <ErrorPage />,
   },
   {
     path: '/projects',
-    element: <ProjectsPage />,
+    element: (
+      <React.Suspense fallback={<Loading />}>
+        <ProjectsPage />
+      </React.Suspense>
+    ),
   },
   {
     path: '/curriculum',
-    element: <CurriculumPage />,
+    element: (
+      <React.Suspense fallback={<Loading />}>
+        <CurriculumPage />
+      </React.Suspense>
+    ),
   },
   {
     path: '/contacts',
-    element: <ContactPage />,
+    element: (
+      <React.Suspense fallback={<Loading />}>
+        <ContactPage />
+      </React.Suspense>
+    ),
   },
 ])