From 15c8335603e535628f6e898a1cb5b75fb0fd048e Mon Sep 17 00:00:00 2001
From: Donald Dong <mail@ddong.me>
Date: Wed, 17 Apr 2019 23:48:01 +0000
Subject: [PATCH] Add a loader for the events page

---
 frontend/src/components/loader.js   | 11 ++++
 frontend/src/components/loader.scss | 93 +++++++++++++++++++++++++++++
 frontend/src/events/events.js       | 16 +++--
 frontend/src/events/events.scss     |  3 +
 frontend/src/fade_in.scss           | 16 +++++
 5 files changed, 134 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/loader.js
 create mode 100644 frontend/src/components/loader.scss
 create mode 100644 frontend/src/fade_in.scss

diff --git a/frontend/src/components/loader.js b/frontend/src/components/loader.js
new file mode 100644
index 0000000..9392f02
--- /dev/null
+++ b/frontend/src/components/loader.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './loader.scss';
+
+const Loader = () => (
+  <div className="loader-wrapper">
+    <div className="loader"></div>
+  </div>
+);
+
+export default Loader;
diff --git a/frontend/src/components/loader.scss b/frontend/src/components/loader.scss
new file mode 100644
index 0000000..d94dfe1
--- /dev/null
+++ b/frontend/src/components/loader.scss
@@ -0,0 +1,93 @@
+@import '../colors';
+
+.loader-wrapper {
+  align-items: center;
+  display: flex;
+  min-height: 80vh;
+}
+
+.loader {
+  color: $logo-color;
+  font-size: 20px;
+  margin: 100px auto;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-animation: load4 1.3s infinite linear;
+  animation: load4 1.3s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+@-webkit-keyframes load4 {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+@keyframes load4 {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
diff --git a/frontend/src/events/events.js b/frontend/src/events/events.js
index e7dabaf..24a0d14 100644
--- a/frontend/src/events/events.js
+++ b/frontend/src/events/events.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import axios from 'axios';
 
 import GuestNav from '../components/guest_nav';
+import Loader from '../components/loader';
 import Teams from './teams';
 
 import './events.scss';
@@ -109,14 +110,19 @@ class EventsPage extends React.Component {
 
   render() {
     const { events } = this.state;
+    const content = events.length > 0 ? (
+      <div className="events">
+        {events.map(e => (
+          <Event key={e.name} {...e} />
+        ))}
+      </div>
+    ) : (
+      <Loader/ >
+    );
     return (
       <div className="events-page">
         <GuestNav />
-        <div className="events">
-          {events.map(e => (
-            <Event key={e.name} {...e} />
-          ))}
-        </div>
+        {content}
       </div>
     );
   }
diff --git a/frontend/src/events/events.scss b/frontend/src/events/events.scss
index a25ab82..f8c5c15 100644
--- a/frontend/src/events/events.scss
+++ b/frontend/src/events/events.scss
@@ -1,11 +1,14 @@
 @import '../breakpoints';
 @import '../colors';
+@import '../fade_in';
 
 .events-page {
   display: flex;
   flex-direction: column;
 
   .event {
+    @extend %fade-in;
+
     @include breakpoint-tablet-down {
       flex-direction: column;
     }
diff --git a/frontend/src/fade_in.scss b/frontend/src/fade_in.scss
new file mode 100644
index 0000000..da6dc7d
--- /dev/null
+++ b/frontend/src/fade_in.scss
@@ -0,0 +1,16 @@
+@keyframes fade-in-frames {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+%fade-in {
+  opacity: 1;
+  animation-name: fade-in-frames;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 0.5s;
+}