React lazy loading

2 files changed, 58 insertions, 7 deletions

diff --git a/thallium-frontend/src/App.tsx b/thallium-frontend/src/App.tsx
index 701c744..ec54c17 100644
--- a/thallium-frontend/src/App.tsx
+++ b/thallium-frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
-import { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import {
   createBrowserRouter,
   RouterProvider,
@@ -8,12 +8,12 @@ import {
 import themes from "./themes.tsx";
 
 import Header from "./components/Header";
+import LoadingBar from "./components/LoadingBar";
 
-import LandingPage from "./pages/LandingPage";
-import ErrorPage from "./pages/ErrorPage";
-import DesignSystem from "./pages/DesignSystem";
-import StorePage from "./pages/StorePage";
-
+const LandingPage = React.lazy(() => import("./pages/LandingPage"));
+const ErrorPage = React.lazy(() => import("./pages/ErrorPage"));
+const DesignSystem = React.lazy(() => import("./pages/DesignSystem"));
+const StorePage = React.lazy(() => import("./pages/StorePage"));
 
 const GlobalStyle = createGlobalStyle`
   html,
@@ -101,7 +101,9 @@ function App() {
         <GlobalStyle />
         <ContentContainer>
           <Header />
-          <RouterProvider router={router} />
+          <Suspense fallback={<LoadingBar />}>
+            <RouterProvider router={router} />
+          </Suspense>
         </ContentContainer>
 
         <BodySeparator />
diff --git a/thallium-frontend/src/components/LoadingBar.tsx b/thallium-frontend/src/components/LoadingBar.tsx
new file mode 100644
index 0000000..3ec81b7
--- /dev/null
+++ b/thallium-frontend/src/components/LoadingBar.tsx
@@ -0,0 +1,49 @@
+import styled, { keyframes } from "styled-components";
+
+const spanKeyframes = keyframes`
+    0% {
+        filter: brightness(1);
+    }
+    50% {
+        filter: brightness(0.5);
+    }
+    100% {
+        filter: brightness(1);
+    }
+`;
+
+const LoadingBarContainer = styled.div`
+    span {
+        background-color: ${({ theme }) => theme.accent};
+        display: inline-block;
+        height: 1rem;
+        width: 1rem;
+        margin: 0.5rem;
+        animation: ${spanKeyframes} 1s infinite;
+    }
+
+    span:nth-child(1) {
+        animation-delay: 0s;
+    }
+
+    span:nth-child(2) {
+        animation-delay: 0.25s;
+    }
+
+    span:nth-child(3) {
+        animation-delay: 0.5s;
+    }
+`;
+
+
+const LoadingBar = () => {
+    return (
+        <LoadingBarContainer>
+            <span></span>
+            <span></span>
+            <span></span>
+        </LoadingBarContainer>
+    );
+};
+
+export default LoadingBar;