From ad5d15ca6128f7ebe39279f1b3ea58dc8832f8f9 Mon Sep 17 00:00:00 2001
From: Joe Banks <joseph@josephbanks.me>
Date: Mon, 12 Oct 2020 23:53:24 +0100
Subject: Improve loader style

---
 src/App.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 56aff08..ff4e553 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 /** @global location */
 import React, { Suspense } from "react";
-import { jsx, Global } from "@emotion/core";
+import { jsx, css, Global } from "@emotion/core";
 
 import {
   BrowserRouter as Router,
@@ -25,6 +25,16 @@ const routes = [
   { path: "/callback", Component: CallbackPage }
 ]
 
+function PageLoading() {
+  return <div css={css`
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+  `}>
+    <HashLoader color="white" size={100}/>
+  </div>
+}
+
 function App() {
   return (
     <div>
@@ -40,7 +50,7 @@ function App() {
               <Switch location={location}>
                 {routes.map(({path, Component}) => (
                   <Route exact key={path} path={path}>
-                    <Suspense fallback={<HashLoader color="white"/>}>
+                    <Suspense fallback={<PageLoading/>}>
                       <Component/>
                     </Suspense>
                   </Route>
-- 
cgit v1.2.3