Loader view & component

src/components/AdminHeader.tsx

@@ -5,14 +5,16 @@ import { colors } from "@theme/colors";
 
 const Header = styled.header`
   background-color: ${colors.darkBlue};
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
 
   a {
+    flex: 1 0 auto;
+    margin: 0.5rem auto;
+    max-width: 600px;
+
     img {
-      display: block;
-      margin: 0.5rem auto;
-      padding: 2rem;
-      width: 100%;
-      max-width: 800px;
       fill: ${colors.white};
     }
   }

src/components/Loader.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+
+const Loader = styled((props) => (
+  <div {...props}>
+    <div>
+      <div />
+    </div>
+  </div>
+))<{ $color?: typeof colors }>`
+  overflow: hidden;
+  font-size: 200px;
+  width: 1em;
+  height: 1em;
+
+  @keyframes rotation {
+    0% { transform: rotate(0deg) }
+    50% { transform: rotate(180deg) }
+    100% { transform: rotate(360deg) }
+  }
+
+  & > div {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0;
+
+    & > div {
+      box-sizing: content-box;
+      position: absolute;
+      animation: rotation 1s linear infinite;
+      width: 80%;
+      height: 80%;
+      top: 10%;
+      left: 10%;
+      border-radius: 50%;
+      box-shadow: 0 0.02em 0 0 ${({ $color }) => $color || colors.white};
+      transform-origin: 50% 51%;
+    }
+  }
+`;
+
+export default Loader;

src/pages/events/[id].tsx

@@ -7,6 +7,7 @@ import {
 } from "@models/Event";
 import EventPageView from "@views/EventPage/EventPageView";
 import PageWrapper from "@views/common/PageWrapper";
+import LoadingView from "@views/common/LoadingView";
 
 interface InitialProps {
   initialEvent: Event;
@@ -16,7 +17,7 @@ const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
   const router = useRouter();
   const { id } = router.query;
   const { data, error } = useFetchEvents({ initialData: initialEvent, id: id as string });
-  if (!data) return <div>Loading</div>;
+  if (!data) return <LoadingView />;
 
   return (
     <>

src/views/EventPage/EventPageView.tsx

@@ -8,6 +8,7 @@ import { Link, TextSection } from "@components/index";
 import noop from "@utils/noop";
 
 import MarkdownStyles from "@views/common/MarkdownStyles";
+import LoadingView from "@views/common/LoadingView";
 
 interface EventPageViewProps {
   event?: Event;
@@ -36,7 +37,7 @@ const Content = styled(MarkdownStyles)`
 `;
 
 const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
-  if (!event) return <div>Loading</div>;
+  if (!event) return <LoadingView />;
   return (
     <StyledTextSection>
       <h1>

src/views/SignUpPage/SignUpPageView.tsx

@@ -8,6 +8,7 @@ import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget
 import { TextSection } from "@components/index";
 import { colors } from "@theme/colors";
 import FormWrapper from "@views/common/FormWrapper";
+import Loader from "@components/Loader";
 
 const customWidgets = {
   radio: RadioButtonWidget,
@@ -52,6 +53,10 @@ const StyledSection = styled(TextSection)`
       color: ${colors.blue1};
     }
   }
+
+  ${Loader} {
+    margin: auto;
+  }
 `;
 
 const SignUpPageView: React.FC<SignUpPageViewProps> = ({
@@ -78,7 +83,9 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
     );
   };
 
-  const form = signUpForm ? renderForm() : <>Loading...</>;
+  const form = signUpForm ? renderForm() : (
+    <Loader $color={colors.darkBlue} />
+  );
 
   const signups = signUpForm && signUpForm.signups ? renderList(signUpForm) : null;
   return (

src/views/common/AdminPageWrapper.tsx

@@ -6,6 +6,7 @@ import AdminHeader from "@components/AdminHeader";
 import AdminSidebar from "@components/AdminSidebar";
 import { isAuthenticated } from "@utils/auth";
 import { useRouter } from "next/router";
+import LoadingView from "./LoadingView";
 
 const Main = styled.main`
   display: flex;
@@ -70,9 +71,8 @@ const AdminPageWrapper: React.FC<PageProps> = ({ requiresAuthentication, childre
     router.push(loginURL);
   }
 
-  // TODO: Loading screen
   if (!completed) {
-    return <>Loading</>;
+    return <LoadingView />;
   }
 
   return (

src/views/common/LoadingView.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import styled from "styled-components";
+import Loader from "@components/Loader";
+import colors from "@theme/colors";
+
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  justify-content: center;
+  align-items: center;
+  color: ${colors.white};
+  background-color: ${colors.darkBlue};
+
+  ${/* sc-selector */Loader} {
+    font-size: 10rem;
+  }
+`;
+
+const DotPulse = styled.div`
+  @keyframes dotPulseBefore {
+    0% {
+      box-shadow: 9984px 0 0 -5px ${colors.white};
+    }
+    30% {
+      box-shadow: 9984px 0 0 2px ${colors.white};
+    }
+    60%, 100% {
+      box-shadow: 9984px 0 0 -5px ${colors.white};
+    }
+  }
+
+  @keyframes dotPulse {
+    0% {
+      box-shadow: 9999px 0 0 -5px ${colors.white};
+    }
+    30% {
+      box-shadow: 9999px 0 0 2px ${colors.white};
+    }
+    60%, 100% {
+      box-shadow: 9999px 0 0 -5px ${colors.white};
+    }
+  }
+
+  @keyframes dotPulseAfter {
+    0% {
+      box-shadow: 10014px 0 0 -5px ${colors.white};
+    }
+    30% {
+      box-shadow: 10014px 0 0 2px ${colors.white};
+    }
+    60%, 100% {
+      box-shadow: 10014px 0 0 -5px ${colors.white};
+    }
+  }
+
+  display: inline-block;
+  margin-left: 1.5rem;
+
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: ${colors.white};
+  color: ${colors.white};
+  box-shadow: 9999px 0 0 -5px ${colors.white};
+  animation: dotPulse 1.5s infinite linear;
+  animation-delay: .25s;
+
+  &::before, &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: ${colors.white};
+    color: ${colors.white};
+  }
+
+  &::before {
+    box-shadow: 9984px 0 0 -5px ${colors.white};
+    animation: dotPulseBefore 1.5s infinite linear;
+    animation-delay: 0s;
+  }
+
+  &::after {
+    box-shadow: 10014px 0 0 -5px ${colors.white};
+    animation: dotPulseAfter 1.5s infinite linear;
+    animation-delay: .5s;
+  }
+`;
+
+const LoadingView: React.FC = () => (
+  <Main>
+    <Loader />
+    <h3>
+      Loading
+      <DotPulse />
+    </h3>
+  </Main>
+);
+
+export default LoadingView;