Add OldSchoolSpinner for loading animation

diff --git a/www/jssrc/blerg/Feed.js b/www/jssrc/blerg/Feed.js
index 1bb4e37..63ef7fb 100644 (file)
--- a/www/jssrc/blerg/Feed.js
+++ b/www/jssrc/blerg/Feed.js
@@ -6,6 +6,7 @@ enyo.kind({
     },
     components: [
         {name: "records"},
+        {name: "spinner", kind: "OldSchoolSpinner", showing: false},
         {name: "api", kind: "blerg.API",
          onItemsLoaded: "itemsLoaded"}
     ],

diff --git a/www/jssrc/blerg/Pager.js b/www/jssrc/blerg/Pager.js
index 2e27177..92f6f4c 100644 (file)
--- a/www/jssrc/blerg/Pager.js
+++ b/www/jssrc/blerg/Pager.js
@@ -4,7 +4,8 @@ enyo.kind({
     listKind: "Control",
     lastRecord: null,
     components: [
-        {name: "records"}
+        {name: "records"},
+        {name: "spinner", kind: "OldSchoolSpinner", showing: false}
     ],
     addItems: function(items) {
         this.$.records.createComponents(items, {kind: this.listKind});
@@ -14,6 +15,7 @@ enyo.kind({
                 this.lastRecord = r;
         }
         this.$.records.render();
+        this.stopLoadAnimation();
     },
     loadMore: function() {
         if (this.lastRecord == 0)
@@ -29,5 +31,15 @@ enyo.kind({
             this.loadItems();
         }
     },
-    loadItems: function(from, to) { }
+    loadItems: function(from, to) {
+        this.startLoadAnimation();
+    },
+    startLoadAnimation: function() {
+        this.$.spinner.show();
+        this.$.spinner.start();
+    },
+    stopLoadAnimation: function() {
+        this.$.spinner.hide();
+        this.$.spinner.stop();
+    }
 });

diff --git a/www/jssrc/blerg/Tag.js b/www/jssrc/blerg/Tag.js
index d885481..65761aa 100644 (file)
--- a/www/jssrc/blerg/Tag.js
+++ b/www/jssrc/blerg/Tag.js
@@ -8,6 +8,7 @@ enyo.kind({
     },
     components: [
         {name: "records"},
+        {name: "spinner", kind: "OldSchoolSpinner", showing: false},
         {name: "api", kind: "blerg.API",
          onItemsLoaded: "itemsLoaded"}
     ],

diff --git a/www/jssrc/blerg/User.js b/www/jssrc/blerg/User.js
index ac4c24c..1775d0a 100644 (file)
--- a/www/jssrc/blerg/User.js
+++ b/www/jssrc/blerg/User.js
@@ -23,6 +23,7 @@ enyo.kind({
             ]}
         ]},
         {name: "records"},
+        {name: "spinner", kind: "OldSchoolSpinner", showing: false},
         {name: "loadMoreButton", kind: "onyx.Button", onclick: "loadMore", content: "Load More"},
         {name: "api", kind: "blerg.API",
          onItemsLoaded: "itemsLoaded",

diff --git a/www/jssrc/lib/OldSchoolSpinner.js b/www/jssrc/lib/OldSchoolSpinner.js
new file mode 100644 (file)
index 0000000..3c359e2
--- /dev/null
+++ b/www/jssrc/lib/OldSchoolSpinner.js
@@ -0,0 +1,27 @@
+enyo.kind({
+    name: "OldSchoolSpinner",
+    kind: "Control",
+    style: "font-family: Inconsolata, Consolas, Fixedsys, fixed, monospace; font-size: 16px",
+    content: '|',
+    steps: '/-\\|',
+    step: 0,
+    animationInterval: null,
+    destroy: function() {
+        this.stop();
+        this.inherited(arguments);
+    },
+    start: function() {
+        if (this.animationInterval)
+            return;
+
+        this.animationInterval = setInterval(this.animate.bind(this), 100);
+    },
+    stop: function() {
+        clearInterval(this.animationInterval);
+        this.animationInterval = null;
+    },
+    animate: function() {
+        this.step = (this.step + 1) % this.steps.length;
+        this.setContent(this.steps[this.step]);
+    }
+});

diff --git a/www/jssrc/package.js b/www/jssrc/package.js
index d9fb1d1..07e84bd 100644 (file)
--- a/www/jssrc/package.js
+++ b/www/jssrc/package.js
@@ -1,4 +1,5 @@
 enyo.depends(
-       '$lib/onyx',
-       'blerg'
+    '$lib/onyx',
+    '$lib/OldSchoolSpinner.js',
+    'blerg'
 );