Add spinning feedback at the bottom of loading rows

Fixes #130
owncloud · Sep 9, 2015 · 7baa717 · 7baa717
1 parent d7bdfab
commit 7baa717
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 24 deletions.
diff --git a/css/public.css b/css/public.css
@@ -46,3 +46,10 @@ body {
 #gallery.hascontrols {
 	padding-bottom: 0;
 }
+
+#loading-indicator {
+	height: 32px;
+	width: 100%;
+	margin-top: 100px;
+	margin-bottom: 0;
+}
diff --git a/css/styles.css b/css/styles.css
@@ -18,7 +18,7 @@ body:after {
 	float: left;
 }
 
-div.crumb.last a{
+div.crumb.last a {
 	cursor: default;
 }
 
@@ -32,9 +32,10 @@ div.crumb.last a{
 	padding: 8px;
 	border-radius: 3px 0 0 3px;
 	margin-left: 3px;
-	margin-right:0;
+	margin-right: 0;
 	border-right: 0;
 }
+
 #controls .button.right-sort-button {
 	float: left;
 	display: inline;
@@ -47,7 +48,7 @@ div.crumb.last a{
 	background-color: rgb(230, 230, 230);
 }
 
-#controls .sort-inactive img{
+#controls .sort-inactive img {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
 	filter: alpha(opacity=25);
 	opacity: 0.25;
@@ -151,7 +152,7 @@ div.crumb.last a{
 
 #gallery a.album .album-label,
 #gallery a.image .image-label {
-	background: rgba(0,0,0,0.4);
+	background: rgba(0, 0, 0, 0.4);
 }
 
 #gallery a.image .image-label .title {
@@ -247,15 +248,6 @@ div.crumb.last a{
 	border-bottom-right-radius: 0;
 }
 
-#loading {
-	font-size: 16px;
-	color: #888;
-	position: absolute;
-	text-align: center;
-	top: 30%;
-	width: 100%;
-}
-
 /*Original ribbon design by Comatosed
 http://www.bypeople.com/author/comatosed/*/
 .ribbon {
@@ -306,3 +298,9 @@ http://www.bypeople.com/author/comatosed/*/
 .ribbon.black:after {
 	border-color: #bbb #bbb transparent #bbb;
 }
+
+#loading-indicator {
+	height: 32px;
+	width: 100%;
+	margin-bottom: 50px;
+}
diff --git a/js/gallery.js b/js/gallery.js
@@ -272,7 +272,6 @@
 		showLoading: function () {
 			$('#emptycontent').addClass('hidden');
 			$('#controls').removeClass('hidden');
-			$('#content').addClass('icon-loading');
 		},
 
 		/**
@@ -281,7 +280,6 @@
 		showNormal: function () {
 			$('#emptycontent').addClass('hidden');
 			$('#controls').removeClass('hidden');
-			$('#content').removeClass('icon-loading');
 		},
 
 		/**

diff --git a/js/galleryrow.js b/js/galleryrow.js
@@ -62,7 +62,7 @@
 			var scaleRatio = (this.width > this.targetWidth) ? this.targetWidth / this.width : 1;
 			var targetHeight = 200 * scaleRatio;
 			targetHeight = targetHeight.toFixed(3);
-			var row = $('<div/>').addClass('row loading');
+			var row = $('<div/>').addClass('row');
 			/**
 			 * @param {*} row
 			 * @param {GalleryImage[]|Album[]} items

diff --git a/js/galleryview.js b/js/galleryview.js
@@ -82,6 +82,7 @@
 			}
 
 			this.clear();
+			$('#loading-indicator').show();
 
 			if (albumPath !== Gallery.currentAlbum) {
 				this.loadVisibleRows.loading = false;
@@ -99,8 +100,7 @@
 			// Loading rows without blocking the execution of the rest of the script
 			setTimeout(function () {
 				this.loadVisibleRows.activeIndex = 0;
-				this.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum],
-					Gallery.currentAlbum);
+				this.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum], Gallery.currentAlbum);
 			}.bind(this), 0);
 		},
 
@@ -163,6 +163,7 @@
 				// If we've reached the end of the album, we kill the loader
 				if (!(album.viewedItems < album.subAlbums.length + album.images.length)) {
 					view.loadVisibleRows.loading = null;
+					$('#loading-indicator').hide();
 					return;
 				}
 
@@ -180,10 +181,6 @@
 					if (view.requestId === row.requestId) {
 						return row.getDom().then(function (dom) {
 
-							// defer removal of loading class to trigger CSS3 animation
-							_.defer(function () {
-								dom.removeClass('loading');
-							});
 							if (Gallery.currentAlbum !== path) {
 								view.loadVisibleRows.loading = null;
 								return; //throw away the row if the user has navigated away in the
@@ -202,9 +199,11 @@
 
 							// No more rows to load at the moment
 							view.loadVisibleRows.loading = null;
+							$('#loading-indicator').hide();
 						}, function () {
 							// Something went wrong, so kill the loader
 							view.loadVisibleRows.loading = null;
+							$('#loading-indicator').hide();
 						});
 					}
 					// This is the safest way to do things
@@ -234,8 +233,9 @@
 
 			var currentSort = Gallery.config.albumSorting;
 			this.sortControlsSetup(currentSort.type, currentSort.order);
-			Gallery.albumMap[Gallery.currentAlbum].images.sort(Gallery.utility.sortBy(currentSort.type,
-				currentSort.order));
+			Gallery.albumMap[Gallery.currentAlbum].images.sort(
+				Gallery.utility.sortBy(currentSort.type,
+					currentSort.order));
 			Gallery.albumMap[Gallery.currentAlbum].subAlbums.sort(Gallery.utility.sortBy('name',
 				currentSort.albumOrder));
 		},

diff --git a/templates/part.content.php b/templates/part.content.php
@@ -80,4 +80,5 @@
 </div>
 <div id="gallery" class="hascontrols"></div>
 <div id="emptycontent" class="hidden"></div>
+<div id="loading-indicator" class="loading"></div>
 <input type="hidden" name="allowShareWithLink" id="allowShareWithLink" value="yes"/>
diff --git a/templates/public.php b/templates/public.php
@@ -133,6 +133,7 @@ class="icon-confirm svg"></button>
 				 data-token="<?php isset($_['token']) ? p($_['token']) : p(false) ?>">
 			</div>
 			<div id="emptycontent" class="hidden"></div>
+			<div id="loading-indicator" class="loading"></div>
 			<footer>
 				<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
 			</footer>