From 6466ab3ebf313721ede683593a41433ba94070a9 Mon Sep 17 00:00:00 2001
From: Haziq Khairi <ikhairulhaziq11@gmail.com>
Date: Wed, 10 Jan 2024 23:26:04 +0800
Subject: [PATCH] refactor: routes and implement lazy loading

---
 src/App.jsx        | 31 +++++++++++++++++--------------
 src/pages/Home.jsx |  2 +-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index a86158f..a2af1c2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,27 +1,29 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Suspense, lazy } from 'react';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
 
-import Home from './pages/Home';
-import TopPicks from './pages/TopPicks';
-import ArtDescription from './pages/ArtDescription';
-import ErrorPage from './pages/Error';
+// Lazy loading of route components
+const Home = lazy(() => import('./pages/Home'));
+const TopPicks = lazy(() => import('./pages/TopPicks'));
+const ArtDescription = lazy(() => import('./pages/ArtDescription'));
+const ErrorPage = lazy(() => import('./pages/Error'));
 
 function App() {
   return (
     <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100">
-      <Router>
+      <Router basename="/artistry-hub/">
         <Navbar />
 
-        {/* Route Definitions */}
-        <Routes>
-          <Route exact path="/artistry-hub/" element={<Home />} />
-          <Route exact path="/artistry-hub/top-picks" element={<TopPicks />} />
-          <Route path="/artistry-hub/art/:id" element={<ArtDescription />} />
-
-          {/* Fallback Error Page for Unmatched Routes */}
-          <Route path="*" element={<ErrorPage />} />
-        </Routes>
+        {/* Suspense fallback during lazy loading */}
+        <Suspense fallback={<div>Loading...</div>}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/top-picks" element={<TopPicks />} />
+            <Route path="/art/:id" element={<ArtDescription />} />
+            <Route path="*" element={<ErrorPage />} />
+          </Routes>
+        </Suspense>
       </Router>
 
       {/* Footer */}
@@ -29,4 +31,5 @@ function App() {
     </div>
   );
 }
+
 export default App;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 45f6f6d..ad00c1a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -11,7 +11,7 @@ const Home = () => {
           ArtistryHub.
         </header>
         <Link
-          to="/artistry-hub/top-picks"
+          to="/top-picks"
           className="flex items-center text-sm sm:text-lg font-medium text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out"
         >
           Explore Featured Artworks{' '}