From e4d72663b651d229dd11472fb414f396fa47dbe2 Mon Sep 17 00:00:00 2001
From: Haziq Khairi <ikhairulhaziq11@gmail.com>
Date: Thu, 11 Jan 2024 20:43:05 +0800
Subject: [PATCH] style: add spinner in the middle of screen

---
 src/App.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index a2af1c2..1e534ad 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,7 @@ 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 { Spinner } from '@nextui-org/react';
 
 // Lazy loading of route components
 const Home = lazy(() => import('./pages/Home'));
@@ -16,7 +17,13 @@ function App() {
         <Navbar />
 
         {/* Suspense fallback during lazy loading */}
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+          fallback={
+            <div className="flex justify-center items-center h-screen fixed top-0 left-0 w-full bg-gray-100">
+              <Spinner size="lg" />
+            </div>
+          }
+        >
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/top-picks" element={<TopPicks />} />