(WIP) Added spinner (#39)

public_html/css/core.css

@@ -52,3 +52,22 @@ hr {
 	background: #f3f7f8;
 	color: #7a9 !important;
 }
+
+#wait-cover {
+	display: flex;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(255, 255, 255, 0.9);
+	z-index: 100;
+}
+#wait .spinner {
+	margin: auto;
+}
+#wait .spinner .fa {
+	font-size: 40px;
+}

public_html/index.html

@@ -42,6 +42,15 @@
 		</div>
 	</div>
 
+	<div id="wait">
+		<div id="wait-cover">
+			<div class="spinner">
+				<i class="fa fa-spin fa-circle-o-notch"></i>
+				<p>Loading</p>
+			</div>
+		</div>
+	</div>
+
 	<!-- build:template
 	<% _.each(templates, function(templateString, templateName) { %>
 		<script type="text/template" id="<%= templateName %>-template">

public_html/js/PresenterManager.js

@@ -1,36 +1,60 @@
 var App = App || {};
 
-App.PresenterManager = function(topNavigationPresenter) {
+App.PresenterManager = function(jQuery, topNavigationPresenter) {
 
-	var lastContentPresenterName;
+	var lastContentPresenter = null;
-	var lastContentPresenter;
+	var $spinner;
+	var spinnerTimeout;
 
 	function init() {
-		initPresenter('topNavigationPresenter');
+		initPresenter(topNavigationPresenter, [], function() {});
+		$spinner = jQuery('body').find('#wait');
 	}
 
-	function initPresenter(presenterName, args) {
+	function initPresenter(presenter, args, loaded) {
-		var presenter = App.DI.get(presenterName);
+		presenter.init.call(presenter, args, loaded);
-		presenter.init.call(presenter, args);
 	}
 
-	function switchContentPresenter(presenterName, args) {
+	function switchContentPresenter(presenter, args) {
-		if (lastContentPresenterName !== presenterName) {
+		var contentPresenterLoaded = function() {
+			window.clearTimeout(spinnerTimeout);
+			$spinner.hide();
+		};
+
+		spinnerTimeout = window.setTimeout(function() {
+			$spinner.stop().fadeIn('slow');
+		}, 300);
+
+		if (lastContentPresenter === null || lastContentPresenter.name !== presenter.name) {
 			topNavigationPresenter.changeTitle(null);
-			var presenter = App.DI.get(presenterName);
+			presenter.init.call(presenter, args, contentPresenterLoaded);
-			presenter.init.call(presenter, args);
-			lastContentPresenterName = presenterName;
 			lastContentPresenter = presenter;
 		} else if (lastContentPresenter.reinit) {
-			lastContentPresenter.reinit.call(lastContentPresenter, args);
+			lastContentPresenter.reinit.call(lastContentPresenter, args, contentPresenterLoaded);
+		}
+	}
+
+	function initPresenters(options, loaded) {
+		var count = 0;
+		var subPresenterLoaded = function() {
+			count ++;
+			if (count === options.length) {
+				loaded();
+			}
+		};
+
+		for (var i = 0; i < options.length; i ++) {
+			initPresenter(options[i][0], options[i][1], subPresenterLoaded);
 		}
 	}
 
 	return {
 		init: init,
+		initPresenter: initPresenter,
+		initPresenters: initPresenters,
 		switchContentPresenter: switchContentPresenter,
 	};
 
 };
 
-App.DI.registerSingleton('presenterManager', ['topNavigationPresenter'], App.PresenterManager);
+App.DI.registerSingleton('presenterManager', ['jQuery', 'topNavigationPresenter'], App.PresenterManager);

public_html/js/Presenters/CommentListPresenter.js

@@ -7,10 +7,11 @@ App.Presenters.CommentListPresenter = function(
 
 	var $el = jQuery('#content');
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('comments');
 		topNavigationPresenter.changeTitle('Comments');
 		render();
+		loaded();
 	}
 
 	function render() {

public_html/js/Presenters/HelpPresenter.js

@@ -7,10 +7,11 @@ App.Presenters.HelpPresenter = function(
 
 	var $el = jQuery('#content');
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('help');
 		topNavigationPresenter.changeTitle('Help');
 		render();
+		loaded();
 	}
 
 	function render() {

public_html/js/Presenters/HomePresenter.js

@@ -7,10 +7,11 @@ App.Presenters.HomePresenter = function(
 
 	var $el = jQuery('#content');
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('home');
 		topNavigationPresenter.changeTitle('Home');
 		render();
+		loaded();
 	}
 
 	function render() {

public_html/js/Presenters/LoginPresenter.js

@@ -16,17 +16,19 @@ App.Presenters.LoginPresenter = function(
 	var template;
 	var previousRoute;
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('login');
 		topNavigationPresenter.changeTitle('Login');
 		previousRoute = args.previousRoute;
-		promise.wait(util.promiseTemplate('login-form')).then(function(html) {
+		promise.wait(util.promiseTemplate('login-form'))
+			.then(function(html) {
 				template = _.template(html);
 				if (auth.isLoggedIn()) {
 					finishLogin();
 				} else {
 					render();
 				}
+				loaded();
 			});
 	}
 

public_html/js/Presenters/LogoutPresenter.js

@@ -11,14 +11,17 @@ App.Presenters.LogoutPresenter = function(
 
 	var $messages = jQuery('#content');
 
-	function init() {
+	function init(args, loaded) {
 		topNavigationPresenter.select('logout');
 		topNavigationPresenter.changeTitle('Logout');
-		promise.wait(auth.logout()).then(function() {
+		promise.wait(auth.logout())
+			.then(function() {
+				loaded();
 				$messages.empty();
 				var $messageDiv = messagePresenter.showInfo($messages, 'Logged out. <a href="">Back to main page</a>');
 				$messageDiv.find('a').click(mainPageLinkClicked);
 			}).fail(function(response) {
+				loaded();
 				messagePresenter.showError(($messages, response.json && response.json.error || response) + '<br/>Reload the page to continue.');
 			});
 	}

public_html/js/Presenters/PagedCollectionPresenter.js

@@ -24,7 +24,7 @@ App.Presenters.PagedCollectionPresenter = function(
 	var updateCallback;
 	var failCallback;
 
-	function init(args) {
+	function init(args, loaded) {
 		forceClear = !_.isEqual(args.searchParams, searchParams) || parseInt(args.page) !== pageNumber + 1;
 		searchParams = args.searchParams;
 		pageNumber = parseInt(args.page) || 1;
@@ -34,9 +34,12 @@ App.Presenters.PagedCollectionPresenter = function(
 		updateCallback = args.updateCallback;
 		failCallback = args.failCallback;
 
-		promise.wait(util.promiseTemplate('pager')).then(function(html) {
+		promise.wait(util.promiseTemplate('pager'))
+			.then(function(html) {
 				template = _.template(html);
-			softChangePage(pageNumber);
+				softChangePage(pageNumber)
+					.then(loaded)
+					.fail(loaded);
 
 				if (!endlessScroll) {
 					mousetrap.bind('a', function(e) {
@@ -82,9 +85,11 @@ App.Presenters.PagedCollectionPresenter = function(
 	function softChangePage(newPageNumber) {
 		pageNumber = newPageNumber;
 
+		return promise.make(function(resolve, reject) {
 			promise.wait(
 				api.get(backendUri, _.extend({}, searchParams, {page: pageNumber})))
 					.then(function(response) {
+						resolve(response);
 						var pageSize = response.json.pageSize;
 						var totalRecords = response.json.totalRecords;
 						totalPages = Math.ceil(totalRecords / pageSize);
@@ -97,12 +102,14 @@ App.Presenters.PagedCollectionPresenter = function(
 
 						render($target);
 					}).fail(function(response) {
+						reject(response);
 						if (typeof(failCallback) !== 'undefined') {
 							failCallback(response);
 						} else {
 							console.log(new Error(response.json && response.json.error || response));
 						}
 					});
+		});
 	}
 
 	function render($target) {

public_html/js/Presenters/PostListPresenter.js

@@ -16,30 +16,31 @@ App.Presenters.PostListPresenter = function(
 	var listTemplate;
 	var itemTemplate;
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('posts');
 		topNavigationPresenter.changeTitle('Posts');
 
 		promise.waitAll(
 				util.promiseTemplate('post-list'),
-			util.promiseTemplate('post-list-item')).then(function(listHtml, itemHtml) {
+				util.promiseTemplate('post-list-item'))
+			.then(function(listHtml, itemHtml) {
 				listTemplate = _.template(listHtml);
 				itemTemplate = _.template(itemHtml);
 
 				render();
-			reinit(args);
+				reinit(args, loaded);
 			});
 	}
 
-	function reinit(args) {
+	function reinit(args, loaded) {
 		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
 		searchArgs.order = searchArgs.order;
 
 		updateActiveOrder(searchArgs.order);
-		initPaginator(searchArgs);
+		initPaginator(searchArgs, loaded);
 	}
 
-	function initPaginator(searchArgs) {
+	function initPaginator(searchArgs, onLoad) {
 		pagedCollectionPresenter.init({
 			page: searchArgs.page,
 			searchParams: {order: searchArgs.order},
@@ -52,7 +53,7 @@ App.Presenters.PostListPresenter = function(
 			failCallback: function(response) {
 				$el.empty();
 				messagePresenter.showError($el, response.json && response.json.error || response);
-			}});
+			}}, onLoad);
 	}
 
 	function render() {

public_html/js/Presenters/PostUploadPresenter.js

@@ -20,13 +20,15 @@ App.Presenters.PostUploadPresenter = function(
 	var tagInput;
 	var interactionEnabled = true;
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('upload');
 		topNavigationPresenter.changeTitle('Upload');
 
-		promise.wait(util.promiseTemplate('post-upload')).then(function(html) {
+		promise.wait(util.promiseTemplate('post-upload'))
+			.then(function(html) {
 				template = _.template(html);
 				render();
+				loaded();
 			});
 	}
 
@@ -524,7 +526,8 @@ App.Presenters.PostUploadPresenter = function(
 			return;
 		}
 
-		promise.wait(api.post('/posts', formData)).then(function(response) {
+		promise.wait(api.post('/posts', formData))
+			.then(function(response) {
 				$row.slideUp(function(response) {
 					$row.remove();
 					posts.shift();

public_html/js/Presenters/RegistrationPresenter.js

@@ -14,12 +14,14 @@ App.Presenters.RegistrationPresenter = function(
 	var template;
 	var $messages;
 
-	function init() {
+	function init(args, loaded) {
 		topNavigationPresenter.select('register');
 		topNavigationPresenter.changeTitle('Registration');
-		promise.wait(util.promiseTemplate('registration-form')).then(function(html) {
+		promise.wait(util.promiseTemplate('registration-form'))
+			.then(function(html) {
 				template = _.template(html);
 				render();
+				loaded();
 			});
 	}
 

public_html/js/Presenters/TagListPresenter.js

@@ -7,10 +7,11 @@ App.Presenters.TagListPresenter = function(
 
 	var $el = jQuery('#content');
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('tags');
 		topNavigationPresenter.changeTitle('Tags');
 		render();
+		loaded();
 	}
 
 	function render() {

public_html/js/Presenters/TopNavigationPresenter.js

@@ -13,10 +13,12 @@ App.Presenters.TopNavigationPresenter = function(
 	var template;
 	var baseTitle = document.title;
 
-	function init() {
+	function init(args, loaded) {
-		promise.wait(util.promiseTemplate('top-navigation')).then(function(html) {
+		promise.wait(util.promiseTemplate('top-navigation'))
+			.then(function(html) {
 				template = _.template(html);
 				render();
+				loaded();
 				auth.startObservingLoginChanges('top-navigation', loginStateChanged);
 			});
 	}

public_html/js/Presenters/UserAccountRemovalPresenter.js

@@ -16,8 +16,7 @@ App.Presenters.UserAccountRemovalPresenter = function(
 	var user;
 	var privileges = {};
 
-	function init(args) {
+	function init(args, loaded) {
-		return promise.make(function(resolve, reject) {
 		user = args.user;
 		target = args.target;
 
@@ -25,11 +24,11 @@ App.Presenters.UserAccountRemovalPresenter = function(
 			auth.hasPrivilege(auth.privileges.deleteAllAccounts) ||
 			(auth.hasPrivilege(auth.privileges.deleteOwnAccount) && auth.isLoggedIn(user.name));
 
-			promise.wait(util.promiseTemplate('account-removal')).then(function(html) {
+		promise.wait(util.promiseTemplate('account-removal'))
+			.then(function(html) {
 				template = _.template(html);
 				render();
-				resolve();
+				loaded();
-			});
 			});
 	}
 

public_html/js/Presenters/UserAccountSettingsPresenter.js

@@ -16,8 +16,7 @@ App.Presenters.UserAccountSettingsPresenter = function(
 	var privileges;
 	var avatarContent;
 
-	function init(args) {
+	function init(args, loaded) {
-		return promise.make(function(resolve, reject) {
 		user = args.user;
 		target = args.target;
 
@@ -38,11 +37,11 @@ App.Presenters.UserAccountSettingsPresenter = function(
 				(auth.hasPrivilege(auth.privileges.changeOwnPassword) && auth.isLoggedIn(user.name)),
 		};
 
-			promise.wait(util.promiseTemplate('account-settings')).then(function(html) {
+		promise.wait(util.promiseTemplate('account-settings'))
+			.then(function(html) {
 				template = _.template(html);
 				render();
-				resolve();
+				loaded();
-			});
 			});
 	}
 

public_html/js/Presenters/UserActivationPresenter.js

@@ -18,15 +18,16 @@ App.Presenters.UserActivationPresenter = function(
 	var formHidden = false;
 	var operation;
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('login');
 		topNavigationPresenter.changeTitle('Account recovery');
-		reinit(args);
+		reinit(args, loaded);
 	}
 
-	function reinit(args) {
+	function reinit(args, loaded) {
 		operation = args.operation;
-		promise.wait(util.promiseTemplate('user-query-form')).then(function(html) {
+		promise.wait(util.promiseTemplate('user-query-form'))
+			.then(function(html) {
 				template = _.template(html);
 				if (args.token) {
 					hideForm();
@@ -35,6 +36,7 @@ App.Presenters.UserActivationPresenter = function(
 					showForm();
 				}
 				render();
+				loaded();
 			});
 	}
 
@@ -68,7 +70,8 @@ App.Presenters.UserActivationPresenter = function(
 			'/password-reset/' + userNameOrEmail :
 			'/activation/' + userNameOrEmail;
 
-		api.post(url).then(function(response) {
+		api.post(url)
+			.then(function(response) {
 				var message = operation === 'passwordReset' ?
 					'Password reset request sent.' :
 					'Activation e-mail resent.';
@@ -89,7 +92,8 @@ App.Presenters.UserActivationPresenter = function(
 			'/finish-password-reset/' + token :
 			'/finish-activation/' + token;
 
-		api.post(url).then(function(response) {
+		api.post(url)
+			.then(function(response) {
 				var message = operation === 'passwordReset' ?
 					'Your new password is <strong>' + response.json.newPassword + '</strong>.' :
 					'E-mail activation successful.';

public_html/js/Presenters/UserBrowsingSettingsPresenter.js

@@ -15,18 +15,17 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 	var user;
 	var privileges = {};
 
-	function init(args) {
+	function init(args, loaded) {
-		return promise.make(function(resolve, reject) {
 		user = args.user;
 		target = args.target;
 
 		privileges.canChangeBrowsingSettings = auth.isLoggedIn(user.name) && user.name === auth.getCurrentUser().name;
 
-			promise.wait(util.promiseTemplate('browsing-settings')).then(function(html) {
+		promise.wait(util.promiseTemplate('browsing-settings'))
+			.then(function(html) {
 				template = _.template(html);
 				render();
-				resolve();
+				loaded();
-			});
 			});
 	}
 
@@ -41,6 +40,7 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 		var $el = jQuery(target);
 		var $messages = $el.find('.messages');
 		messagePresenter.hideMessages($messages);
+
 		var newSettings = {
 			endlessScroll: $el.find('[name=endless-scroll]').is(':checked'),
 			hideDownvoted: $el.find('[name=hide-downvoted]').is(':checked'),
@@ -50,7 +50,9 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 				unsafe: $el.find('[name=listUnsafePosts]').is(':checked'),
 			},
 		};
-		browsingSettings.setSettings(newSettings).then(function() {
+
+		browsingSettings.setSettings(newSettings)
+			.then(function() {
 				messagePresenter.showInfo($messages, 'Browsing settings updated!');
 			});
 	}

public_html/js/Presenters/UserListPresenter.js

@@ -16,30 +16,31 @@ App.Presenters.UserListPresenter = function(
 	var listTemplate;
 	var itemTemplate;
 
-	function init(args) {
+	function init(args, loaded) {
 		topNavigationPresenter.select('users');
 		topNavigationPresenter.changeTitle('Users');
 
 		promise.waitAll(
 				util.promiseTemplate('user-list'),
-			util.promiseTemplate('user-list-item')).then(function(listHtml, itemHtml) {
+				util.promiseTemplate('user-list-item'))
+			.then(function(listHtml, itemHtml) {
 				listTemplate = _.template(listHtml);
 				itemTemplate = _.template(itemHtml);
 
 				render();
-			reinit(args);
+				reinit(args, loaded);
 			});
 	}
 
-	function reinit(args) {
+	function reinit(args, loaded) {
 		var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
 		searchArgs.order = searchArgs.order || 'name';
 
 		updateActiveOrder(searchArgs.order);
-		initPaginator(searchArgs);
+		initPaginator(searchArgs, loaded);
 	}
 
-	function initPaginator(searchArgs) {
+	function initPaginator(searchArgs, onLoad) {
 		pagedCollectionPresenter.init({
 			page: searchArgs.page,
 			searchParams: {order: searchArgs.order},
@@ -52,7 +53,7 @@ App.Presenters.UserListPresenter = function(
 			failCallback: function(response) {
 				$el.empty();
 				messagePresenter.showError($el, response.json && response.json.error || response);
-			}});
+			}}, onLoad);
 	}
 
 	function render() {

public_html/js/Presenters/UserPresenter.js

@@ -9,6 +9,7 @@ App.Presenters.UserPresenter = function(
 	api,
 	auth,
 	topNavigationPresenter,
+	presenterManager,
 	userBrowsingSettingsPresenter,
 	userAccountSettingsPresenter,
 	userAccountRemovalPresenter,
@@ -21,7 +22,7 @@ App.Presenters.UserPresenter = function(
 	var userName;
 	var activeTab;
 
-	function init(args) {
+	function init(args, loaded) {
 		userName = args.userName;
 		topNavigationPresenter.select(auth.isLoggedIn(userName) ? 'my-account' : 'users');
 		topNavigationPresenter.changeTitle(userName);
@@ -38,12 +39,12 @@ App.Presenters.UserPresenter = function(
 				user = response.json;
 				var extendedContext = _.extend(args, {user: user});
 
-			promise.waitAll(
+				presenterManager.initPresenters([
-				userBrowsingSettingsPresenter.init(_.extend(extendedContext, {target: '#browsing-settings-target'})),
+					[userBrowsingSettingsPresenter, _.extend({}, extendedContext, {target: '#browsing-settings-target'})],
-				userAccountSettingsPresenter.init(_.extend(extendedContext, {target: '#account-settings-target'})),
+					[userAccountSettingsPresenter, _.extend({}, extendedContext, {target: '#account-settings-target'})],
-				userAccountRemovalPresenter.init(_.extend(extendedContext, {target: '#account-removal-target'})))
+					[userAccountRemovalPresenter, _.extend({}, extendedContext, {target: '#account-removal-target'})]],
-			.then(function() {
+					function() {
-				initTabs(args);
+						reinit(args, loaded);
 					});
 
 			}).fail(function(response) {
@@ -52,6 +53,11 @@ App.Presenters.UserPresenter = function(
 			});
 	}
 
+	function reinit(args, loaded) {
+		initTabs(args);
+		loaded();
+	}
+
 	function initTabs(args) {
 		activeTab = args.tab || 'basic-info';
 		render();
@@ -82,10 +88,10 @@ App.Presenters.UserPresenter = function(
 
 	return {
 		init: init,
-		reinit: initTabs,
+		reinit: reinit,
 		render: render
 	};
 
 };
 
-App.DI.register('userPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'auth', 'topNavigationPresenter', 'userBrowsingSettingsPresenter', 'userAccountSettingsPresenter', 'userAccountRemovalPresenter', 'messagePresenter'], App.Presenters.UserPresenter);
+App.DI.register('userPresenter', ['_', 'jQuery', 'util', 'promise', 'api', 'auth', 'topNavigationPresenter', 'presenterManager', 'userBrowsingSettingsPresenter', 'userAccountSettingsPresenter', 'userAccountRemovalPresenter', 'messagePresenter'], App.Presenters.UserPresenter);

public_html/js/Router.js

@@ -57,7 +57,9 @@ App.Router = function(pathJs, _, jQuery, util, appState, presenterManager) {
 				additionalParams,
 				{previousRoute: pathJs.routes.previous});
 
-			presenterManager.switchContentPresenter( presenterName, finalParams);
+			var presenter = App.DI.get(presenterName);
+			presenter.name = presenterName;
+			presenterManager.switchContentPresenter(presenter, finalParams);
 		}).enter(function(e) {
 			if (util.isExitConfirmationEnabled()) {
 				if (window.location.href !== previousLocation) {