Merge pull request #2562 from coreos-inc/fade-in-error

Use CSS animation to fade in the JS-cannot-load error so it doesn't flash on screen

static/css/quay.css

@@ -3774,3 +3774,28 @@ i.mesos-icon {
   padding-right: .5em;
 }
 
+@keyframes loading-js-fade-out-animation {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes loading-js-fade-in-animation {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.loading-js-fade-out {
+  opacity: 1;
+  animation-name: loading-js-fade-out-animation;
+  animation-duration: 1s;
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
+}
+
+.loading-js-fade-in {
+  opacity: 0;
+  animation-name: loading-js-fade-in-animation;
+  animation-duration: 1s;
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
+}

templates/index.html

@@ -23,7 +23,12 @@
   <script src="static/standalonelib/jquery.overscroll.min.js"></script>
 
   <div ng-view>
-    <div class="co-alert co-alert-danger">
+    <div class="co-m-loader co-an-fade-in-out loading-js-fade-out">
+      <div class="co-m-loader-dot__one"></div>
+      <div class="co-m-loader-dot__two"></div>
+      <div class="co-m-loader-dot__three"></div>
+    </div>
+    <div class="co-alert co-alert-danger loading-js-fade-in">
       The Quay application could not be loaded, which typically indicates an external library could not be loaded (usually due to an ad blocker). Please check the JavaScript console for errors.
     </div>
   </div>