Add lazy loading to pages

src/Client/src/main.tsx

@@ -1,11 +1,14 @@
-import React from 'react'
+import React, { Suspense } from "react";
-import ReactDOM from 'react-dom/client'
+import ReactDOM from "react-dom/client";
-import { RouterProvider } from 'react-router-dom'
+import { RouterProvider } from "react-router-dom";
-import './index.css'
+import Loading from "./components/Loading.tsx";
-import router from './routes.tsx'
+import "./index.css";
+import router from "./routes.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
+    <Suspense fallback={<Loading />}>
       <RouterProvider router={router} />
-  </React.StrictMode>,
+    </Suspense>
-)
+  </React.StrictMode>
+);

src/Client/src/pages/AboutPage.tsx

@@ -16,11 +16,6 @@ export default function AboutPage() {
         </AnchorLink>
         .
       </Text>
-      <Text>
-        I'm planning to integrate a simple blog as part of this app that will
-        dive into more specific implementation details so check back soon for
-        more!
-      </Text>
       <AboutTabs />
     </>
   );

src/Client/src/routes.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { createBrowserRouter } from "react-router-dom";
 import Layout from "./pages/Layout";
-import HomePage from "./pages/HomePage";
+
-import ContactPage from "./pages/ContactPage";
+const HomePage = React.lazy(() => import("./pages/HomePage"));
-import AboutPage from "./pages/AboutPage";
+const ContactPage = React.lazy(() => import("./pages/ContactPage"));
+const AboutPage = React.lazy(() => import("./pages/AboutPage"));
 
 const router = createBrowserRouter([
   {