Add real but placeholder spinner

mbta · Jul 18, 2019 · 7afd5f8 · 7afd5f8
1 parent 0d31909
commit 7afd5f8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/apps/site/assets/css/_schedule-page.scss b/apps/site/assets/css/_schedule-page.scss
@@ -370,3 +370,51 @@
   justify-content: space-evenly;
   padding: $base-spacing / 2;
 }
+
+.schedule-finder__spinner,
+.schedule-finder__spinner::before,
+.schedule-finder__spinner::after {
+  animation: load7 1.8s infinite ease-in-out;
+  animation-fill-mode: both;
+  border-radius: 50%;
+  height: 2.5em;
+  width: 2.5em;
+}
+
+.schedule-finder__spinner {
+  animation-delay: -.16s;
+  color: $brand-primary;
+  font-size: 10px;
+  margin: 80px auto;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+}
+
+.schedule-finder__spinner::before,
+.schedule-finder__spinner::after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.schedule-finder__spinner::before {
+  animation-delay: -.32s;
+  left: -3.5em;
+}
+
+.schedule-finder__spinner::after {
+  left: 3.5em;
+}
+
+@keyframes load7 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em;
+  }
+
+  40% {
+    box-shadow: 0 2.5em 0 0;
+  }
+}
diff --git a/apps/site/assets/ts/schedule/__tests__/__snapshots__/ServiceSelectorTest.tsx.snap b/apps/site/assets/ts/schedule/__tests__/__snapshots__/ServiceSelectorTest.tsx.snap
@@ -73,9 +73,9 @@ Array [
     </div>
   </div>,
   <div
-    className="fake-spinner"
+    className="schedule-finder__spinner"
   >
-    SPINNER GOES HERE
+    Loading...
   </div>,
 ]
 `;
diff --git a/apps/site/assets/ts/schedule/components/schedule-finder/ServiceSelector.tsx b/apps/site/assets/ts/schedule/components/schedule-finder/ServiceSelector.tsx
@@ -216,7 +216,7 @@ export const ServiceSelector = ({
         </SelectContainer>
       </div>
 
-      {isLoading && <div className="fake-spinner">SPINNER GOES HERE</div>}
+      {isLoading && <div className="schedule-finder__spinner">Loading...</div>}
 
       {!isLoading && selectedServiceSchedule && (
         <ScheduleTable schedule={selectedServiceSchedule} />