From 8f8ae45c788a3e801de4b502e0cd35bc2f66cf5f Mon Sep 17 00:00:00 2001
From: Jesse Shawl <jesse@jesse.sh>
Date: Mon, 23 Mar 2020 19:47:15 -0500
Subject: [PATCH] wip loading

---
 client/src/components/App.jsx  | 12 ++++++++++++
 client/src/components/App.scss | 28 ++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx
index 6abe6fb..931cbfd 100644
--- a/client/src/components/App.jsx
+++ b/client/src/components/App.jsx
@@ -3,6 +3,16 @@ import "./App.scss";
 import Home from "./Home";
 import Appointment from "./Appointment";
 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+
+const Loading = () => (
+  <div className="loading">
+    <span>/</span>
+    <span>-</span>
+    <span>\</span>
+    <span>|</span>
+    <div>Loading...</div>
+  </div>
+);
 const App = () => (
   <Router>
     <div className="App">
@@ -38,6 +48,8 @@ const App = () => (
           </svg>
         </a>
       </h1>
+
+      <Loading />
       <Switch>
         <Route path="/:id/:ts" component={Appointment} />
         <Route path="/" component={Home} />
diff --git a/client/src/components/App.scss b/client/src/components/App.scss
index 333928e..630d020 100644
--- a/client/src/components/App.scss
+++ b/client/src/components/App.scss
@@ -4,6 +4,34 @@
 * {
   box-sizing: border-box;
 }
+@keyframes loading {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.loading {
+  position: relative;
+  display: inline-block;
+  padding-left: 1rem;
+}
+.loading span {
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  animation: loading 0.5s infinite step-end;
+  display: inline-block;
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i / 8}s;
+    }
+  }
+}
 
 html,
 body,