js: Add loading spinner to packages page.

* css/guix.css: Add spinner styles.
* js/controller/packages.js (guix.packages.view): Explicitly redraw
  after loading packages.
* js/model/packages.js (guix.packages.Packages): Load packages in the
  background.
* js/view/layout.js (guix.withLayout): Cast elem to array if needed.
* js/view/packages.js (guix.packages.view): Render spinner when there
  are no packages to display.

4 files changed, 20 insertions, 9 deletions

diff --git a/js/controller/packages.js b/js/controller/packages.js
index 3a7858d..db94d72 100644
--- a/js/controller/packages.js
+++ b/js/controller/packages.js
@@ -20,7 +20,6 @@
     function controller() {
       var self = this;
 
-      this.packages = packages.Packages();
       this.pages = m.prop([]);
       this.currentPageIndex = 0;
       this.pageSize = 20;
@@ -47,10 +46,12 @@
       this.phase = m.prop(packages.PHASE_NONE);
       this.selectedPackage = m.prop(null);
 
-      // All packages are visible initially
-      this.packages.then(function(packages) {
-        self.pages(self.paginate(packages, self.pageSize));
-      });
+      this.packages = packages.Packages()
+        .then(function(packages) {
+          // All packages are visible initially
+          self.pages(self.paginate(packages, self.pageSize));
+        })
+        .then(m.redraw);
     };
 
 
diff --git a/js/model/packages.js b/js/model/packages.js
index 5ea76a4..652d11a 100644
--- a/js/model/packages.js
+++ b/js/model/packages.js
@@ -19,7 +19,11 @@ guix.packages = {};
 
 (function(packages) {
   packages.Packages = function() {
-    return m.request({ method: "GET", url: "packages.json" });
+    return m.request({
+      method: "GET",
+      url: "packages.json",
+      background: true
+    });
   };
 
   packages.Sorter = (function() {
diff --git a/js/view/layout.js b/js/view/layout.js
index 1ff641a..aa7834b 100644
--- a/js/view/layout.js
+++ b/js/view/layout.js
@@ -42,6 +42,10 @@ guix.withLayout = (function() {
   ]));
 
   return function(elem) {
+    if(!_.isArray(elem)) {
+      elem = [elem];
+    }
+
     return [
       m("nav.navbar.navbar-default.navbar-static-top", {
         role: "navigation"
diff --git a/js/view/packages.js b/js/view/packages.js
index e356984..e202471 100644
--- a/js/view/packages.js
+++ b/js/view/packages.js
@@ -16,6 +16,8 @@
 // <http://www.gnu.org/licenses/>.
 
 (function(packages) {
+  var spinner = m(".spinner-container", m(".spinner"));
+
   packages.view = function(ctrl) {
     function renderName(package) {
       var name = package.name;
@@ -95,7 +97,7 @@
         }, m("a", { href: "#" }, text));
       }
 
-      return m("ul.pagination", [
+      return m("div", m("ul.pagination", [
         // Back page
         renderPage("«", {
           class: ctrl.isFirstPage() ? "disabled" : "",
@@ -125,7 +127,7 @@
             return false;
           }
         })
-      ]));
+      ])));
     }
 
     function renderSearchBox() {
@@ -237,7 +239,7 @@
       return null;
     }
 
-    return guix.withLayout([
+    return guix.withLayout(_.isEmpty(ctrl.pages()) ? spinner : [
       m("h2", [
         "Packages",
         m("span.badge", ctrl.packageCount())