From de5b5ecfa445e09867bc4398da94d83fea7912c3 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 10 Jul 2024 04:49:51 +0100 Subject: Prevent flash of huge loading bar on suspense loaded routes --- src/App.tsx | 23 +++++++++++----- src/images/logo.svg | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 src/images/logo.svg 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
- + return
+ +
; } diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..b173ff1 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,78 @@ + +image/svg+xml \ No newline at end of file -- cgit v1.2.3