[PATCH 18 of 20] hgweb: add loading indicator for ajaxy loads

Alexander Plavin alexander at plav.in
Fri Aug 9 13:57:43 CDT 2013


# HG changeset patch
# User Alexander Plavin <alexander at plav.in>
# Date 1376071479 -14400
#      Fri Aug 09 22:04:39 2013 +0400
# Node ID bfe92dd16d91ab859180beee692ead44fcde6001
# Parent  a587ef25f492acec63d069337b730db7a67fcd77
hgweb: add loading indicator for ajaxy loads

Add simple animation of the indicator to the paper style CSS.

diff -r a587ef25f492 -r bfe92dd16d91 mercurial/templates/static/mercurial.js
--- a/mercurial/templates/static/mercurial.js	Fri Aug 09 22:02:32 2013 +0400
+++ b/mercurial/templates/static/mercurial.js	Fri Aug 09 22:04:39 2013 +0400
@@ -365,7 +365,7 @@
     }
 }
 
-function ajaxScrollInit(urlFormat, lastHash, container) {
+function ajaxScrollInit(urlFormat, lastHash, container, messageFormat) {
     updateInitiated = false;
 
     window.onscroll = function () {
@@ -386,6 +386,12 @@
                 'GET',
                 function onstart() {
                     container.lastElementChild.classList.add('scroll-separator');
+
+                    var message = {
+                        class: 'scroll-loading',
+                        text: 'Loading...'
+                    };
+                    appendHTML(container, format(messageFormat, message));
                 },
                 function onsuccess(xml) {
                     var html = xml.getElementsByTagName('html')[0];
@@ -399,6 +405,7 @@
                 function onerror(errorText) {
                 },
                 function oncomplete() {
+                    removeByClassName('scroll-loading');
                     updateInitiated = false;
                 }
             );
diff -r a587ef25f492 -r bfe92dd16d91 mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css	Fri Aug 09 22:02:32 2013 +0400
+++ b/mercurial/templates/static/style-paper.css	Fri Aug 09 22:04:39 2013 +0400
@@ -383,6 +383,26 @@
     color: blue;
 }
 
+.scroll-loading {
+  -webkit-animation: change_color 1s linear 0s infinite alternate;
+  -moz-animation: change_color 1s linear 0s infinite alternate;
+  -o-animation: change_color 1s linear 0s infinite alternate;
+  animation: change_color 1s linear 0s infinite alternate;
+}
+
+ at -webkit-keyframes change_color {
+  from { background-color: #A0CEFF; } to {  }
+}
+ at -moz-keyframes change_color {
+  from { background-color: #A0CEFF; } to {  }
+}
+ at -o-keyframes change_color {
+  from { background-color: #A0CEFF; } to {  }
+}
+ at keyframes change_color {
+  from { background-color: #A0CEFF; } to {  }
+}
+
 .scroll-separator {
     border-bottom: 1px solid #444 !important;
 }


More information about the Mercurial-devel mailing list