gh-612 Fix Initial loading spinner only shown briefly

ghillert · ghillert · commit 7c1f0b9588f2 · 2018-02-12T16:34:32.000-10:00
diff --git a/ui/src/index.html b/ui/src/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
   <app-root>
-    <div class="jumbotron vertical-center fade">
+    <div class="jumbotron vertical-center fade-index-spinner">
       <div class="container text-center">
         <div class="icon icon-middle" style="font-size: 96px">
           <svg class="icon-spinner-lg" width="200px" height="200px" viewBox="0 0 101 101"
diff --git a/ui/src/styles.scss b/ui/src/styles.scss
@@ -67,6 +67,16 @@ table.table {
   position: unset;
 }
 
+@keyframes fade-index-spinner {
+  0%  { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.fade-index-spinner {
+  animation: fade-index-spinner ease-in-out 1s;
+  animation-fill-mode: forwards;
+}
+
 .vertical-center {
   background-color: #232b2f;
   min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
