Add Suspense component

src/App.tsx

@@ -1,20 +1,23 @@
-import { createContext } from "react";
+import { Suspense, createContext } from "react";
 import { Route, Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import "./styles/App.css";
 import Map from "./pages/Map";
 import { AdminContextType } from "./utils/types";
+import Loading from "./pages/Loading";
 
 export const AdminContext = createContext<AdminContextType | null>(null);
 function App() {
   return (
-    <div className="flex flex-col relative w-full max-h-[100dvh]">
-      <Routes>
-        <Route path="/:postion?" element={<Map />} />
-      </Routes>
-      <ToastContainer position="bottom-left" closeOnClick autoClose={2500} />
-    </div>
+    <Suspense fallback={<Loading />}>
+      <div className="flex flex-col relative w-full max-h-[100dvh]">
+        <Routes>
+          <Route path="/:postion?" element={<Map />} />
+        </Routes>
+        <ToastContainer position="bottom-left" closeOnClick autoClose={2500} />
+      </div>
+    </Suspense>
   );
 }
 

src/pages/Loading.tsx

@@ -0,0 +1,10 @@
+import logo from "@/assets/img/pathpal-logo.svg";
+function Loading() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <img src={logo} alt="PathPal Logo" className="w-32 h-32 animate-spin" />
+    </div>
+  );
+}
+
+export default Loading;