Merge pull request realstoman#21 from SubhamB2003/add-test

Add lazy loading to routes

Author: realstoman

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/App.js

@@ -1,34 +1,39 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
+import { lazy, Suspense } from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ScrollToTop from './components/ScrollToTop';
 import AppFooter from './components/shared/AppFooter';
 import AppHeader from './components/shared/AppHeader';
 import './css/App.css';
-import About from './pages/AboutMe';
-import Contact from './pages/Contact.jsx';
-import Home from './pages/Home';
-import Projects from './pages/Projects';
-import ProjectSingle from './pages/ProjectSingle.jsx';
-import { AnimatePresence } from 'framer-motion';
 import UseScrollToTop from './hooks/useScrollToTop';
 
+const About = lazy(() => import('./pages/AboutMe'));
+const Contact = lazy(() => import('./pages/Contact.jsx'));
+const Home = lazy(() => import('./pages/Home'));
+const Projects = lazy(() => import('./pages/Projects'));
+const ProjectSingle = lazy(() => import('./pages/ProjectSingle.jsx'));
+
+
 function App() {
 	return (
 		<AnimatePresence>
 			<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
 				<Router>
 					<ScrollToTop />
 					<AppHeader />
-					<Routes>
-						<Route path="/" element={<Home />} />
-						<Route path="projects" element={<Projects />} />
-						<Route
-							path="projects/single-project"
-							element={<ProjectSingle />}
-						/>
+					<Suspense fallback={""}>
+						<Routes>
+							<Route path="/" element={<Home />} />
+							<Route path="projects" element={<Projects />} />
+							<Route
+								path="projects/single-project"
+								element={<ProjectSingle />}
+							/>
 
-						<Route path="about" element={<About />} />
-						<Route path="contact" element={<Contact />} />
-					</Routes>
+							<Route path="about" element={<About />} />
+							<Route path="contact" element={<Contact />} />
+						</Routes>
+					</Suspense>
 					<AppFooter />
 				</Router>
 				<UseScrollToTop />