♻️ refactor(App):lazy load routes

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>
+    ),
   },
 ])