add loading indicator

3 files changed, 8 insertions, 2 deletions

diff --git a/reader.css b/reader.css
index 2ec4294..5e53f3f 100755
--- a/reader.css
+++ b/reader.css
@@ -10,7 +10,7 @@
     }
 }
 
-#splash {
+.splash {
 	z-index : 999;
 	position : absolute;
 	top : 0;
diff --git a/reader.html b/reader.html
index e42b112..0a8eea3 100755
--- a/reader.html
+++ b/reader.html
@@ -77,7 +77,8 @@
 </div>
 
 <div class="container">
-	<div id="splash" class="splash text-muted" data-bind="visible: !fileName()">No active file (Ctrl+O).</div>
+	<div id="splash" class="splash text-muted" data-bind="visible: !fileName()"></div>
+	<div id="loading" class="splash text-muted" data-bind="visible: isLoading()"><img src="img/spinning-circles.svg"></div>
 
 	<div id="left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></div>
 	<div id="right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
diff --git a/reader.js b/reader.js
index 13085e2..9dd9290 100755
--- a/reader.js
+++ b/reader.js
@@ -14,6 +14,8 @@ function Model() {
 		return sha1(self.fileName()) + ":" + suffix;
 	};
 
+	self.isLoading = ko.observable(false);
+
 	self.syncClient = {
 		_sha1_compat: function(str) {
 			const sha1 = require('js-sha1');
@@ -68,6 +70,7 @@ function Model() {
 	};
 
 	self.openFile = function (file) {
+		self.isLoading(true);
 		console.log('openFile', file);
 
 		self._zipEntries.removeAll();
@@ -108,6 +111,8 @@ function Model() {
 					self.currentPage(page);
 				else
 					self.currentPage(0);
+
+				self.isLoading(false);
 			});
 		});