lazy load routes

Author: jake-walker

app/src/App.tsx

@@ -1,18 +1,21 @@
 import { Route, Routes } from "react-router";
-import About from "./views/About";
 import Main from "./views/Main";
 import NotFound from "./views/NotFound";
-import View from "./views/View";
 import "@mantine/core/styles.css";
 import "@mantine/dropzone/styles.css";
 import "@mantine/code-highlight/styles.css";
+import { lazy, Suspense } from "react";
+import Loading from "./views/Loading";
+
+const AboutPage = lazy(() => import("./views/About"));
+const ViewPage = lazy(() => import("./views/View"));
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Main />} />
-      <Route path="/about" element={<About />} />
-      <Route path="/:link" element={<View />} />
+      <Route path="/about" element={<Suspense fallback={<Loading />}><AboutPage /></Suspense>} />
+      <Route path="/:link" element={<Suspense fallback={<Loading />}><ViewPage /></Suspense>} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   );

app/src/views/Loading.tsx

@@ -0,0 +1,17 @@
+import { Container, Flex, Loader } from "@mantine/core";
+import Header from "../components/Header";
+
+function Loading() {
+  return (
+    <>
+      <Header small />
+      <Container my={20}>
+        <Flex w="100%" h="100%" justify="center" align="center">
+          <Loader size="lg" />
+        </Flex>
+      </Container>
+    </>
+  );
+}
+
+export default Loading;