[bitbake-devel] [PATCH 17/19] toaster: Add ajax loading spinner

Wed Jun 10 14:39:05 UTC 2015

From: Michael Wood <michael.g.wood at intel.com>

This adds an ajax loading spinner to provide feedback when in-page
loading is happening. It will show after 1.2 seconds of initial loading.

[YOCTO #7790]

Signed-off-by: Michael Wood <michael.g.wood at intel.com>
---
 lib/toaster/toastergui/static/css/default.css  | 49 ++++++++++++++++++++++++++
 lib/toaster/toastergui/static/js/libtoaster.js | 22 ++++++++++++
 lib/toaster/toastergui/templates/base.html     |  5 +++
 3 files changed, 76 insertions(+)

diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css
index 739efbf..115abc4 100644
--- a/lib/toaster/toastergui/static/css/default.css
+++ b/lib/toaster/toastergui/static/css/default.css
@@ -259,3 +259,52 @@ div.add-deps { margin-top: 15px; }
 
 thead .description, .get_description_or_summary { width: 364px; }
 thead .add-del-layers { width: 124px; }
+
+#loading-notification {
+  position: fixed;
+  z-index: 101;
+  top: 3%;
+  left: 40%;
+  right: 40%;
+  #c09853
+  -webkit-box-shadow: 0 0 10px #c09853;
+  -moz-box-shadow: 0 0 10px #c09853;
+  box-shadow: 0 0 10px #c09853;
+}
+
+/* Copied in from newer version of Font-Awesome 4.3.0 */
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+  display: inline-block;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+  display: inline-block;
+}
+
+ at -webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+ at keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+/* End copied in from newer version of Font-Awesome 4.3.0 */
diff --git a/lib/toaster/toastergui/static/js/libtoaster.js b/lib/toaster/toastergui/static/js/libtoaster.js
index 23755a7..c379833 100644
--- a/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/lib/toaster/toastergui/static/js/libtoaster.js
@@ -341,6 +341,8 @@ function reload_params(params) {
 /* Things that happen for all pages */
 $(document).ready(function() {
 
+  var ajaxLoadingTimer;
+
   /* If we don't have a console object which might be the case in some
      * browsers, no-op it to avoid undefined errors.
      */
@@ -482,6 +484,26 @@ $(document).ready(function() {
         $('#collapse-warnings').addClass('in');
     }
 
+    /* Show the loading notification if nothing has happend after 1.5
+     * seconds
+     */
+    $(document).bind("ajaxStart", function(){
+      if (ajaxLoadingTimer)
+        window.clearTimeout(ajaxLoadingTimer);
+
+      ajaxLoadingTimer = window.setTimeout(function() {
+        $("#loading-notification").fadeIn();
+      }, 1200);
+    });
+
+    $(document).bind("ajaxStop", function(){
+      if (ajaxLoadingTimer)
+        window.clearTimeout(ajaxLoadingTimer);
+
+      $("#loading-notification").fadeOut();
+    });
+
+
     function check_for_duplicate_ids () {
       /* warn about duplicate element ids */
       var ids = {};
diff --git a/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html
index 6cdc5e8..9f19c03 100644
--- a/lib/toaster/toastergui/templates/base.html
+++ b/lib/toaster/toastergui/templates/base.html
@@ -68,6 +68,11 @@
     </head>
 
 <body style="height: 100%">
+
+  <div id="loading-notification" class="alert lead text-center" style="display:none">
+    Loading <i class="fa-pulse icon-spinner"></i>
+  </div>
+
 <div class="navbar navbar-static-top">
     <div class="navbar-inner">
             <a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>
-- 
1.9.1


