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>