From c00feede4d27e6a745cef663db2fdd563ab59166 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Fri, 21 Apr 2017 14:08:18 -0400
Subject: [PATCH] Use CSS animation to fade in the JS-cannot-load error so it
 doesn't flash on screen

---
 static/css/quay.css  | 25 +++++++++++++++++++++++++
 templates/index.html |  7 ++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 257d897bb..bf3f07000 100644
--- a/static/css/quay.css
+++ b/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;
+}
diff --git a/templates/index.html b/templates/index.html
index 25204a5d4..fa157bd37 100644
--- a/templates/index.html
+++ b/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>