import { lazy, Suspense} from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { Toaster} from "react-hot-toast"; import css from "./App.module.css"; import Lottie from "lottie-react"; import LoadingAnimation from "./assets/animations/Loading1.json"; const Playground = lazy(() => import("./pages/Playground/Playground.jsx")); const NotFound = lazy(() => import("./pages/404/NotFound.jsx")); function App() { return ( <> <Toaster position="top-center" /> <Router> <Routes> <Route path="/" element={ <> <Suspense fallback={ <> <div className={`${css.animation}`}> <Lottie animationData={LoadingAnimation} loop={true} className={css.lottie} /> </div> </> } > <Playground /> </Suspense> </> } /> <Route path="/*" element={ <> <Suspense fallback={ <> <div className={`${css.animation}`}> <Lottie animationData={LoadingAnimation} loop={true} className={css.lottie} /> </div> </> } > <NotFound /> </Suspense> </> } /> </Routes> </Router> </> ); } export default App;