From de5b5ecfa445e09867bc4398da94d83fea7912c3 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Wed, 10 Jul 2024 04:49:51 +0100
Subject: Prevent flash of huge loading bar on suspense loaded routes

---
 src/App.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

(limited to 'src/App.tsx')

diff --git a/src/App.tsx b/src/App.tsx
index d622840..2738090 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,8 @@ import AuthorizationSplash from "./components/AuthorizationSplash";
 
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
+import Logo from "./images/logo.svg";
+
 import globalStyles from "./globalStyles";
 import NotFound from "./pages/NotFound";
 
@@ -24,13 +26,22 @@ const routes = [
     { path: "/callback", Component: CallbackPage }
 ];
 
+const pageLoadingStyles = css`
+display: flex;
+justify-content: center;
+margin-top: 10%;
+align-items: center;
+flex-direction: column;
+
+svg {
+  transform: scale(0.35);
+}
+`;
+
 function PageLoading() {
-    return <div css={css`
-    display: flex;
-    justify-content: center;
-    margin-top: 50px;
-  `}>
-        <PropagateLoader color="white" size={100}/>
+    return <div css={pageLoadingStyles}>
+        <Logo/>
+        <PropagateLoader color="white"/>
     </div>;
 }
 
-- 
cgit v1.2.3