[gnome-documents] preview: add a loading spinner for long-running load tasks

[Cosimo Cecchi <cosimoc src gnome org>]

commit 31bf5cf49d145c660f89b4879c5384a31decb780
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Wed Jul 20 20:24:37 2011 -0400

    preview: add a loading spinner for long-running load tasks

 src/Makefile-js.am |    1 +
 src/mainToolbar.js |   13 +++++++----
 src/mainWindow.js  |   38 ++++++++++++++++++++++++++++++-----
 src/spinnerBox.js  |   54 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 11 deletions(-)
---
diff --git a/src/Makefile-js.am b/src/Makefile-js.am
index e8a8937..c542dc8 100644
--- a/src/Makefile-js.am
+++ b/src/Makefile-js.am
@@ -9,6 +9,7 @@ dist_js_DATA = \
     mainWindow.js \
     preview.js \
     sidebar.js \
+    spinnerBox.js \
     trackerModel.js \
     utils.js \
     view.js \
diff --git a/src/mainToolbar.js b/src/mainToolbar.js
index 8e0fec5..1705ad1 100644
--- a/src/mainToolbar.js
+++ b/src/mainToolbar.js
@@ -120,11 +120,14 @@ MainToolbar.prototype = {
         labelItem.set_expand(true);
         this.widget.insert(labelItem, 1);
 
-        model.connect('page-changed', Lang.bind(this,
-            function() {
-                this._updatePageLabel(label, model, document);
-            }));
-        this._updatePageLabel(label, model, document);
+
+        if (model && document) {
+            model.connect('page-changed', Lang.bind(this,
+                function() {
+                    this._updatePageLabel(label, model, document);
+                }));
+            this._updatePageLabel(label, model, document);
+        }
 
         this.widget.show_all();
     },
diff --git a/src/mainWindow.js b/src/mainWindow.js
index b4a5c13..182ee3b 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -34,6 +34,7 @@ const TrackerModel = imports.trackerModel;
 const IconView = imports.iconView;
 const ListView = imports.listView;
 const Preview = imports.preview;
+const SpinnerBox = imports.spinnerBox;
 
 const _ = imports.gettext.gettext;
 
@@ -41,6 +42,7 @@ const _WINDOW_DEFAULT_WIDTH = 768;
 const _WINDOW_DEFAULT_HEIGHT = 600;
 
 const _SEARCH_ENTRY_TIMEOUT = 200;
+const _PDF_LOADER_TIMEOUT = 300;
 
 function MainWindow() {
     this._init();
@@ -49,6 +51,7 @@ function MainWindow() {
 MainWindow.prototype = {
     _init: function() {
         this._searchTimeout = 0;
+        this._loaderTimeout = 0;
 
         this.window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL,
                                        window_position: Gtk.WindowPosition.CENTER,
@@ -133,7 +136,7 @@ MainWindow.prototype = {
         this.view.setModel(this._model.model);
     },
 
-    _updateLoadMoreButton: function(itemCount, offset) {
+    _refreshLoadMoreButton: function(itemCount, offset) {
         let remainingDocs = itemCount - (offset + TrackerModel.OFFSET_STEP);
 
         if (remainingDocs <= 0) {
@@ -148,6 +151,13 @@ MainWindow.prototype = {
         this._loadMore.show();
     },
 
+    _prepareForPreview: function(model, document) {
+        this._destroyView();
+        this._sidebar.widget.hide();
+
+        this._toolbar.setPreview(model, document);
+    },
+
     _onModelCreated: function() {
         this.view.setModel(this._model.model);
         this._model.populateForOverview();
@@ -161,17 +171,33 @@ MainWindow.prototype = {
         let loader = new Gd.PdfLoader();
         loader.connect('notify::document', Lang.bind(this, this._onDocumentLoaded));
         loader.uri = uri;
+
+        this._loaderTimeout = Mainloop.timeout_add(_PDF_LOADER_TIMEOUT,
+                                                   Lang.bind(this, this._onPdfLoaderTimeout));
+    },
+
+    _onPdfLoaderTimeout: function() {
+        this._loaderTimeout = 0;
+
+        this._prepareForPreview();
+
+        let spinnerBox = new SpinnerBox.SpinnerBox();
+        this._scrolledWin.add_with_viewport(spinnerBox.widget);
+
+        return false;
     },
 
     _onDocumentLoaded: function(loader) {
         let document = loader.document;
         let model = EvView.DocumentModel.new_with_document(document);
 
-        this._destroyView();
-        this._sidebar.widget.hide();
+        if (this._loaderTimeout) {
+            Mainloop.source_remove(this._loaderTimeout);
+            this._loaderTimeout = 0;
+        }
 
+        this._prepareForPreview(model, document);
         this._preview = new Preview.PreviewView(model, document);
-        this._toolbar.setPreview(model, document);
 
         this._scrolledWin.add(this._preview.widget);
     },
@@ -186,7 +212,7 @@ MainWindow.prototype = {
         this._refreshViewSettings();
         // needs to be called after _refreshViewSettings(), as that
         // recreates the button
-        this._updateLoadMoreButton(this._model.itemCount, this._model.offset);
+        this._refreshLoadMoreButton(this._model.itemCount, this._model.offset);
     },
 
     _onSearchEntryChanged: function() {
@@ -207,7 +233,7 @@ MainWindow.prototype = {
     },
 
     _onModelCountUpdated: function(model, itemCount, offset) {
-        this._updateLoadMoreButton(itemCount, offset);
+        this._refreshLoadMoreButton(itemCount, offset);
     },
 
     _onSourceFilterChanged: function(sidebar, id) {
diff --git a/src/spinnerBox.js b/src/spinnerBox.js
new file mode 100644
index 0000000..ac5f17e
--- /dev/null
+++ b/src/spinnerBox.js
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2011 Red Hat, Inc.
+ *
+ * Gnome Documents is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version.
+ *
+ * Gnome Documents is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with Gnome Documents; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+ *
+ * Author: Cosimo Cecchi <cosimoc redhat com>
+ *
+ */
+
+const Gtk = imports.gi.Gtk;
+const _ = imports.gettext.gettext;
+
+const _SPINNER_SIZE = 125;
+
+function SpinnerBox() {
+    this._init();
+}
+
+SpinnerBox.prototype = {
+    _init: function() {
+        this.widget = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL,
+                                     column_spacing: 24,
+                                     hexpand: true,
+                                     vexpand: true,
+                                     halign: Gtk.Align.CENTER,
+                                     valign: Gtk.Align.CENTER });
+
+        this._spinner = new Gtk.Spinner({ width_request: _SPINNER_SIZE,
+                                          height_request: _SPINNER_SIZE,
+                                          halign: Gtk.Align.CENTER,
+                                          valign: Gtk.Align.CENTER });
+        this._spinner.start();
+        this.widget.add(this._spinner);
+
+        this._label = new Gtk.Label({ label: _('Loading...'),
+                                      halign: Gtk.Align.CENTER,
+                                      valign: Gtk.Align.CENTER });
+        this.widget.add(this._label);
+
+        this.widget.show_all();
+    }
+};