Merge pull request #2215 from gittip/loading-indicator

Add a loading indicator to team members tab
gratipay · Apr 1, 2014 · 77065d4 · 77065d4
2 parents c641294 + d44c902
commit 77065d4
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 2 deletions.
diff --git a/js/gittip/team.js b/js/gittip/team.js
@@ -1,8 +1,20 @@
 Gittip.team = (function() {
     function init() {
+        var $team = $('#team');
+
+        var $indicator = $('<div class="loading-indicator"/>');
+        $indicator.appendTo($('#page'));
+
         $('#lookup-container form').submit(add);
         $('#query').focus().keyup(lookup);
-        jQuery.get("index.json").success(drawRows);
+
+        $team.css('opacity', 0);
+
+        jQuery.get("index.json").success(function(members) {
+            $team.css('opacity', 1);
+            $indicator.remove();
+            drawRows(members);
+        });
     }
 
 

diff --git a/requirements.txt b/requirements.txt
@@ -36,7 +36,7 @@
 ./vendor/raven-3.1.4.tar.gz
 ./vendor/fake-factory-0.3.2.tar.gz
 
-./vendor/libsass-0.2.4.tar.gz
+./vendor/libsass-0.3.0.tar.gz
 ./vendor/honcho-0.5.0.tar.gz
 
 ./vendor/vcrpy-0.6.0.tar.gz
diff --git a/scss/animation-mixins.scss b/scss/animation-mixins.scss
@@ -0,0 +1,15 @@
+@mixin animation($animation...) {
+    -webkit-animation: $animation;
+    animation: $animation;
+}
+
+@mixin keyframes($name) {
+    @-webkit-keyframes #{$name} {
+        @content;
+    }
+
+    @keyframes #{$name} {
+        @content;
+    }
+}
+
diff --git a/scss/gittip.scss b/scss/gittip.scss
@@ -8,12 +8,14 @@
 @import "variables";
 @import "layout-mixins";
 @import "fonts-colors-mixins";
+@import "animation-mixins";
 @import "utils";
 @import "buttons-knobs";
 @import "modals";
 @import "notifications";
 @import "modules";  // bigger than a knob, but used in multiple places
 @import "elements"; // specific HTML elements (body, p, etc.)
+@import "loading-indicators";
 
 @import "lib/dropdown"; // You guessed it... dropdowns.
 @import "lib/chart";

diff --git a/scss/loading-indicators.scss b/scss/loading-indicators.scss
@@ -0,0 +1,28 @@
+.loading-indicator {
+    position: relative;
+    margin: 0 auto 25px;
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 -128 1536 1536"><circle cx="767" cy="640" r="767" fill="%23dddddd" /></svg>') no-repeat;
+
+    &:after {
+        content: '';
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" viewBox="0 -128 1536 1536"><path d="M 763,1046 413,573 q -16,-22 -24.5,-59 -8.5,-37 6,-85 14.5,-48 61.5,-79 40,-26 83,-25.5 43,0.5 73.5,17.5 30.5,17 54.5,45 36,40 96,40 59,0 95,-40 24,-28 54.5,-45 30.5,-17 73.5,-17.5 43,-0.5 84,25.5 46,31 60.5,79 14.5,48 6,85 -8.5,37 -24.5,59 z" fill="%23ffffff" /></svg>') no-repeat;
+
+        @include animation(heartbeat 1.5s infinite ease-in-out);
+    }
+}
+
+@include keyframes(heartbeat) {
+    10%  { width: 125%; height: 125%; top: -12.5%; left: -12.5% }
+    20%  { width: 100%; height: 100%; top: 0; left: 0 }
+    30%  { width: 125%; height: 125%; top: -12.5%; left: -12.5% }
+    40%  { width: 100%; height: 100%; top: 0; left: 0 }
+}
diff --git a/vendor/libsass-0.2.4.tar.gz b/vendor/libsass-0.2.4.tar.gz
diff --git a/vendor/libsass-0.3.0.tar.gz b/vendor/libsass-0.3.0.tar.gz