From abf800bcedf3f70801bbcfda481197d37d915801 Mon Sep 17 00:00:00 2001
From: KazemHe <123581188+KazemHe@users.noreply.github.com>
Date: Wed, 15 Nov 2023 17:02:30 +0200
Subject: [PATCH] #issue 187 lazy load - dynamic import (#218)

---
 src/routes/index.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 4e11793f..4cade905 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,13 +1,14 @@
 import { TEXT_KEYS } from 'src/resources/texts'
 import { Navigate, Route, Routes } from 'react-router-dom'
-
-import DashboardPage from '../pages/dashboard/DashboardPage'
-import TimelinePage from '../pages/TimelinePage'
-import GapsPage from '../pages/GapsPage'
-import GapsPatternsPage from '../pages/gapsPatterns'
-import RealtimeMapPage from '../pages/RealtimeMapPage'
-import SingleLineMapPage from '../pages/SingleLineMapPage'
-import About from '../pages/About'
+import React, { lazy, Suspense } from 'react'
+const DashboardPage = lazy(() => import('../pages/dashboard/DashboardPage'))
+const TimelinePage = lazy(() => import('../pages/TimelinePage'))
+const GapsPage = lazy(() => import('../pages/GapsPage'))
+const GapsPatternsPage = lazy(() => import('../pages/gapsPatterns'))
+const RealtimeMapPage = lazy(() => import('../pages/RealtimeMapPage'))
+const SingleLineMapPage = lazy(() => import('../pages/SingleLineMapPage'))
+const About = lazy(() => import('../pages/About'))
+import CircularProgress from '@mui/material/CircularProgress'
 
 import {
   RadarChartOutlined,
@@ -85,12 +86,14 @@ const RoutesList = () => {
   const RedirectToDashboard = () => <Navigate to={PAGES[0].path} replace />
   const routes = PAGES.filter((r) => r.element)
   return (
-    <Routes>
-      {routes.map(({ path, element }) => (
-        <Route key={path} path={path} element={element} />
-      ))}
-      <Route path="*" element={<RedirectToDashboard />} />
-    </Routes>
+    <Suspense fallback={<CircularProgress />}>
+      <Routes>
+        {routes.map(({ path, element }) => (
+          <Route key={path} path={path} element={element} />
+        ))}
+        <Route path="*" element={<RedirectToDashboard />} />
+      </Routes>
+    </Suspense>
   )
 }