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; | |