From eb7c50735920e87c3146ad607d8fe5fbded1945b Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Wed, 17 Sep 2014 22:37:49 +0200
Subject: [PATCH] (WIP) Added spinner (#39)

---
 public_html/css/core.css                      | 19 +++++
 public_html/index.html                        |  9 +++
 public_html/js/PresenterManager.js            | 52 ++++++++----
 .../js/Presenters/CommentListPresenter.js     |  3 +-
 public_html/js/Presenters/HelpPresenter.js    |  3 +-
 public_html/js/Presenters/HomePresenter.js    |  3 +-
 public_html/js/Presenters/LoginPresenter.js   | 20 ++---
 public_html/js/Presenters/LogoutPresenter.js  | 19 +++--
 .../js/Presenters/PagedCollectionPresenter.js | 79 ++++++++++---------
 .../js/Presenters/PostListPresenter.js        | 25 +++---
 .../js/Presenters/PostUploadPresenter.js      | 35 ++++----
 .../js/Presenters/RegistrationPresenter.js    | 12 +--
 public_html/js/Presenters/TagListPresenter.js |  3 +-
 .../js/Presenters/TopNavigationPresenter.js   | 14 ++--
 .../Presenters/UserAccountRemovalPresenter.js | 19 +++--
 .../UserAccountSettingsPresenter.js           | 45 ++++++-----
 .../js/Presenters/UserActivationPresenter.js  | 68 ++++++++--------
 .../UserBrowsingSettingsPresenter.js          | 24 +++---
 .../js/Presenters/UserListPresenter.js        | 25 +++---
 public_html/js/Presenters/UserPresenter.js    | 50 ++++++------
 public_html/js/Router.js                      |  4 +-
 21 files changed, 310 insertions(+), 221 deletions(-)

diff --git a/public_html/css/core.css b/public_html/css/core.css
index 3777b025..05681fcd 100644
--- a/public_html/css/core.css
+++ b/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;
+}
diff --git a/public_html/index.html b/public_html/index.html
index 16bce1de..ba49e6e4 100644
--- a/public_html/index.html
+++ b/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">
diff --git a/public_html/js/PresenterManager.js b/public_html/js/PresenterManager.js
index 10ec786e..43c8385d 100644
--- a/public_html/js/PresenterManager.js
+++ b/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;
+	var lastContentPresenter = null;
+	var $spinner;
+	var spinnerTimeout;
 
 	function init() {
-		initPresenter('topNavigationPresenter');
+		initPresenter(topNavigationPresenter, [], function() {});
+		$spinner = jQuery('body').find('#wait');
 	}
 
-	function initPresenter(presenterName, args) {
-		var presenter = App.DI.get(presenterName);
-		presenter.init.call(presenter, args);
+	function initPresenter(presenter, args, loaded) {
+		presenter.init.call(presenter, args, loaded);
 	}
 
-	function switchContentPresenter(presenterName, args) {
-		if (lastContentPresenterName !== presenterName) {
+	function switchContentPresenter(presenter, args) {
+		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);
-			lastContentPresenterName = presenterName;
+			presenter.init.call(presenter, args, contentPresenterLoaded);
 			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);
diff --git a/public_html/js/Presenters/CommentListPresenter.js b/public_html/js/Presenters/CommentListPresenter.js
index ab65b62d..566ce38b 100644
--- a/public_html/js/Presenters/CommentListPresenter.js
+++ b/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() {
diff --git a/public_html/js/Presenters/HelpPresenter.js b/public_html/js/Presenters/HelpPresenter.js
index 9f6fcff6..27620fce 100644
--- a/public_html/js/Presenters/HelpPresenter.js
+++ b/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() {
diff --git a/public_html/js/Presenters/HomePresenter.js b/public_html/js/Presenters/HomePresenter.js
index c550eb8a..6f2b1254 100644
--- a/public_html/js/Presenters/HomePresenter.js
+++ b/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() {
diff --git a/public_html/js/Presenters/LoginPresenter.js b/public_html/js/Presenters/LoginPresenter.js
index edb5068d..5081075f 100644
--- a/public_html/js/Presenters/LoginPresenter.js
+++ b/public_html/js/Presenters/LoginPresenter.js
@@ -16,18 +16,20 @@ 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) {
-			template = _.template(html);
-			if (auth.isLoggedIn()) {
-				finishLogin();
-			} else {
-				render();
-			}
-		});
+		promise.wait(util.promiseTemplate('login-form'))
+			.then(function(html) {
+				template = _.template(html);
+				if (auth.isLoggedIn()) {
+					finishLogin();
+				} else {
+					render();
+				}
+				loaded();
+			});
 	}
 
 	function render() {
diff --git a/public_html/js/Presenters/LogoutPresenter.js b/public_html/js/Presenters/LogoutPresenter.js
index ecd9eac0..9f67e01b 100644
--- a/public_html/js/Presenters/LogoutPresenter.js
+++ b/public_html/js/Presenters/LogoutPresenter.js
@@ -11,16 +11,19 @@ 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() {
-			$messages.empty();
-			var $messageDiv = messagePresenter.showInfo($messages, 'Logged out. <a href="">Back to main page</a>');
-			$messageDiv.find('a').click(mainPageLinkClicked);
-		}).fail(function(response) {
-			messagePresenter.showError(($messages, response.json && response.json.error || response) + '<br/>Reload the page to continue.');
-		});
+		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.');
+			});
 	}
 
 	function mainPageLinkClicked(e) {
diff --git a/public_html/js/Presenters/PagedCollectionPresenter.js b/public_html/js/Presenters/PagedCollectionPresenter.js
index cad4f4f4..f246dd34 100644
--- a/public_html/js/Presenters/PagedCollectionPresenter.js
+++ b/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,23 +34,26 @@ App.Presenters.PagedCollectionPresenter = function(
 		updateCallback = args.updateCallback;
 		failCallback = args.failCallback;
 
-		promise.wait(util.promiseTemplate('pager')).then(function(html) {
-			template = _.template(html);
-			softChangePage(pageNumber);
+		promise.wait(util.promiseTemplate('pager'))
+			.then(function(html) {
+				template = _.template(html);
+				softChangePage(pageNumber)
+					.then(loaded)
+					.fail(loaded);
 
-			if (!endlessScroll) {
-				mousetrap.bind('a', function(e) {
-					if (!e.altKey && !e.ctrlKey) {
-						prevPage();
-					}
-				});
-				mousetrap.bind('d', function(e) {
-					if (!e.altKey && !e.ctrlKey) {
-						nextPage();
-					}
-				});
-			}
-		});
+				if (!endlessScroll) {
+					mousetrap.bind('a', function(e) {
+						if (!e.altKey && !e.ctrlKey) {
+							prevPage();
+						}
+					});
+					mousetrap.bind('d', function(e) {
+						if (!e.altKey && !e.ctrlKey) {
+							nextPage();
+						}
+					});
+				}
+			});
 	}
 
 	function prevPage() {
@@ -82,27 +85,31 @@ App.Presenters.PagedCollectionPresenter = function(
 	function softChangePage(newPageNumber) {
 		pageNumber = newPageNumber;
 
-		promise.wait(
-			api.get(backendUri, _.extend({}, searchParams, {page: pageNumber})))
-			.then(function(response) {
-				var pageSize = response.json.pageSize;
-				var totalRecords = response.json.totalRecords;
-				totalPages = Math.ceil(totalRecords / pageSize);
+		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);
 
-				var $target = updateCallback({
-					entities: response.json.data,
-					totalRecords: totalRecords},
-					forceClear || !endlessScroll);
-				forceClear = false;
+						var $target = updateCallback({
+							entities: response.json.data,
+							totalRecords: totalRecords},
+							forceClear || !endlessScroll);
+						forceClear = false;
 
-				render($target);
-			}).fail(function(response) {
-				if (typeof(failCallback) !== 'undefined') {
-					failCallback(response);
-				} else {
-					console.log(new Error(response.json && response.json.error || response));
-				}
-			});
+						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) {
diff --git a/public_html/js/Presenters/PostListPresenter.js b/public_html/js/Presenters/PostListPresenter.js
index 02993c62..cd52c542 100644
--- a/public_html/js/Presenters/PostListPresenter.js
+++ b/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) {
-			listTemplate = _.template(listHtml);
-			itemTemplate = _.template(itemHtml);
+				util.promiseTemplate('post-list'),
+				util.promiseTemplate('post-list-item'))
+			.then(function(listHtml, itemHtml) {
+				listTemplate = _.template(listHtml);
+				itemTemplate = _.template(itemHtml);
 
-			render();
-			reinit(args);
-		});
+				render();
+				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() {
diff --git a/public_html/js/Presenters/PostUploadPresenter.js b/public_html/js/Presenters/PostUploadPresenter.js
index deb4074d..e3dc4d2e 100644
--- a/public_html/js/Presenters/PostUploadPresenter.js
+++ b/public_html/js/Presenters/PostUploadPresenter.js
@@ -20,14 +20,16 @@ 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) {
-			template = _.template(html);
-			render();
-		});
+		promise.wait(util.promiseTemplate('post-upload'))
+			.then(function(html) {
+				template = _.template(html);
+				render();
+				loaded();
+			});
 	}
 
 	function render() {
@@ -524,18 +526,19 @@ App.Presenters.PostUploadPresenter = function(
 			return;
 		}
 
-		promise.wait(api.post('/posts', formData)).then(function(response) {
-			$row.slideUp(function(response) {
-				$row.remove();
-				posts.shift();
-				setAllPosts(posts);
-				uploadNextPost();
+		promise.wait(api.post('/posts', formData))
+			.then(function(response) {
+				$row.slideUp(function(response) {
+					$row.remove();
+					posts.shift();
+					setAllPosts(posts);
+					uploadNextPost();
+				});
+			}).fail(function(response) {
+				messagePresenter.hideMessages($messages);
+				messagePresenter.showError($messages, response.json && response.json.error || response);
+				interactionEnabled = true;
 			});
-		}).fail(function(response) {
-			messagePresenter.hideMessages($messages);
-			messagePresenter.showError($messages, response.json && response.json.error || response);
-			interactionEnabled = true;
-		});
 	}
 
 	function submitButtonClicked(e) {
diff --git a/public_html/js/Presenters/RegistrationPresenter.js b/public_html/js/Presenters/RegistrationPresenter.js
index b96eb444..a8faeccd 100644
--- a/public_html/js/Presenters/RegistrationPresenter.js
+++ b/public_html/js/Presenters/RegistrationPresenter.js
@@ -14,13 +14,15 @@ 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) {
-			template = _.template(html);
-			render();
-		});
+		promise.wait(util.promiseTemplate('registration-form'))
+			.then(function(html) {
+				template = _.template(html);
+				render();
+				loaded();
+			});
 	}
 
 	function render() {
diff --git a/public_html/js/Presenters/TagListPresenter.js b/public_html/js/Presenters/TagListPresenter.js
index 3cb11590..9f4dcfaf 100644
--- a/public_html/js/Presenters/TagListPresenter.js
+++ b/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() {
diff --git a/public_html/js/Presenters/TopNavigationPresenter.js b/public_html/js/Presenters/TopNavigationPresenter.js
index 51696c70..44d3b719 100644
--- a/public_html/js/Presenters/TopNavigationPresenter.js
+++ b/public_html/js/Presenters/TopNavigationPresenter.js
@@ -13,12 +13,14 @@ App.Presenters.TopNavigationPresenter = function(
 	var template;
 	var baseTitle = document.title;
 
-	function init() {
-		promise.wait(util.promiseTemplate('top-navigation')).then(function(html) {
-			template = _.template(html);
-			render();
-			auth.startObservingLoginChanges('top-navigation', loginStateChanged);
-		});
+	function init(args, loaded) {
+		promise.wait(util.promiseTemplate('top-navigation'))
+			.then(function(html) {
+				template = _.template(html);
+				render();
+				loaded();
+				auth.startObservingLoginChanges('top-navigation', loginStateChanged);
+			});
 	}
 
 	function select(newSelectedElement) {
diff --git a/public_html/js/Presenters/UserAccountRemovalPresenter.js b/public_html/js/Presenters/UserAccountRemovalPresenter.js
index da3ba4ac..7e2156d3 100644
--- a/public_html/js/Presenters/UserAccountRemovalPresenter.js
+++ b/public_html/js/Presenters/UserAccountRemovalPresenter.js
@@ -16,21 +16,20 @@ App.Presenters.UserAccountRemovalPresenter = function(
 	var user;
 	var privileges = {};
 
-	function init(args) {
-		return promise.make(function(resolve, reject) {
-			user = args.user;
-			target = args.target;
+	function init(args, loaded) {
+		user = args.user;
+		target = args.target;
 
-			privileges.canDeleteAccount =
-				auth.hasPrivilege(auth.privileges.deleteAllAccounts) ||
-				(auth.hasPrivilege(auth.privileges.deleteOwnAccount) && auth.isLoggedIn(user.name));
+		privileges.canDeleteAccount =
+			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();
 			});
-		});
 	}
 
 	function render() {
diff --git a/public_html/js/Presenters/UserAccountSettingsPresenter.js b/public_html/js/Presenters/UserAccountSettingsPresenter.js
index a3d5ebfd..1da0de4f 100644
--- a/public_html/js/Presenters/UserAccountSettingsPresenter.js
+++ b/public_html/js/Presenters/UserAccountSettingsPresenter.js
@@ -16,34 +16,33 @@ App.Presenters.UserAccountSettingsPresenter = function(
 	var privileges;
 	var avatarContent;
 
-	function init(args) {
-		return promise.make(function(resolve, reject) {
-			user = args.user;
-			target = args.target;
+	function init(args, loaded) {
+		user = args.user;
+		target = args.target;
 
-			privileges = {
-				canChangeAccessRank:
-					auth.hasPrivilege(auth.privileges.changeAccessRank),
-				canChangeAvatarStyle:
-					auth.hasPrivilege(auth.privileges.changeAllAvatarStyles) ||
-					(auth.hasPrivilege(auth.privileges.changeOwnAvatarStyle) && auth.isLoggedIn(user.name)),
-				canChangeName:
-					auth.hasPrivilege(auth.privileges.changeAllNames) ||
-					(auth.hasPrivilege(auth.privileges.changeOwnName) && auth.isLoggedIn(user.name)),
-				canChangeEmailAddress:
-					auth.hasPrivilege(auth.privileges.changeAllEmailAddresses) ||
-					(auth.hasPrivilege(auth.privileges.changeOwnEmailAddress) && auth.isLoggedIn(user.name)),
-				canChangePassword:
-					auth.hasPrivilege(auth.privileges.changeAllPasswords) ||
-					(auth.hasPrivilege(auth.privileges.changeOwnPassword) && auth.isLoggedIn(user.name)),
-			};
+		privileges = {
+			canChangeAccessRank:
+				auth.hasPrivilege(auth.privileges.changeAccessRank),
+			canChangeAvatarStyle:
+				auth.hasPrivilege(auth.privileges.changeAllAvatarStyles) ||
+				(auth.hasPrivilege(auth.privileges.changeOwnAvatarStyle) && auth.isLoggedIn(user.name)),
+			canChangeName:
+				auth.hasPrivilege(auth.privileges.changeAllNames) ||
+				(auth.hasPrivilege(auth.privileges.changeOwnName) && auth.isLoggedIn(user.name)),
+			canChangeEmailAddress:
+				auth.hasPrivilege(auth.privileges.changeAllEmailAddresses) ||
+				(auth.hasPrivilege(auth.privileges.changeOwnEmailAddress) && auth.isLoggedIn(user.name)),
+			canChangePassword:
+				auth.hasPrivilege(auth.privileges.changeAllPasswords) ||
+				(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();
 			});
-		});
 	}
 
 	function render() {
diff --git a/public_html/js/Presenters/UserActivationPresenter.js b/public_html/js/Presenters/UserActivationPresenter.js
index c1bbcc82..5d4a22fc 100644
--- a/public_html/js/Presenters/UserActivationPresenter.js
+++ b/public_html/js/Presenters/UserActivationPresenter.js
@@ -18,24 +18,26 @@ 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) {
-			template = _.template(html);
-			if (args.token) {
-				hideForm();
-				confirmToken(args.token);
-			} else {
-				showForm();
-			}
-			render();
-		});
+		promise.wait(util.promiseTemplate('user-query-form'))
+			.then(function(html) {
+				template = _.template(html);
+				if (args.token) {
+					hideForm();
+					confirmToken(args.token);
+				} else {
+					showForm();
+				}
+				render();
+				loaded();
+			});
 	}
 
 	function render() {
@@ -68,18 +70,19 @@ App.Presenters.UserActivationPresenter = function(
 			'/password-reset/' + userNameOrEmail :
 			'/activation/' + userNameOrEmail;
 
-		api.post(url).then(function(response) {
-			var message = operation === 'passwordReset' ?
-				'Password reset request sent.' :
-				'Activation e-mail resent.';
-			message += ' Check your inbox.<br/>If e-mail doesn\'t show up, check your spam folder.';
+		api.post(url)
+			.then(function(response) {
+				var message = operation === 'passwordReset' ?
+					'Password reset request sent.' :
+					'Activation e-mail resent.';
+				message += ' Check your inbox.<br/>If e-mail doesn\'t show up, check your spam folder.';
 
-			$el.find('#user-query-form').slideUp(function() {
-				messagePresenter.showInfo($messages, message);
+				$el.find('#user-query-form').slideUp(function() {
+					messagePresenter.showInfo($messages, message);
+				});
+			}).fail(function(response) {
+				messagePresenter.showError($messages, response.json && response.json.error || response);
 			});
-		}).fail(function(response) {
-			messagePresenter.showError($messages, response.json && response.json.error || response);
-		});
 	}
 
 	function confirmToken(token) {
@@ -89,17 +92,18 @@ App.Presenters.UserActivationPresenter = function(
 			'/finish-password-reset/' + token :
 			'/finish-activation/' + token;
 
-		api.post(url).then(function(response) {
-			var message = operation === 'passwordReset' ?
-				'Your new password is <strong>' + response.json.newPassword + '</strong>.' :
-				'E-mail activation successful.';
+		api.post(url)
+			.then(function(response) {
+				var message = operation === 'passwordReset' ?
+					'Your new password is <strong>' + response.json.newPassword + '</strong>.' :
+					'E-mail activation successful.';
 
-			$el.find('#user-query-form').slideUp(function() {
-				messagePresenter.showInfo($messages, message);
+				$el.find('#user-query-form').slideUp(function() {
+					messagePresenter.showInfo($messages, message);
+				});
+			}).fail(function(response) {
+				messagePresenter.showError($messages, response.json && response.json.error || response);
 			});
-		}).fail(function(response) {
-			messagePresenter.showError($messages, response.json && response.json.error || response);
-		});
 	}
 
 	return {
diff --git a/public_html/js/Presenters/UserBrowsingSettingsPresenter.js b/public_html/js/Presenters/UserBrowsingSettingsPresenter.js
index 8f00436c..97e86315 100644
--- a/public_html/js/Presenters/UserBrowsingSettingsPresenter.js
+++ b/public_html/js/Presenters/UserBrowsingSettingsPresenter.js
@@ -15,19 +15,18 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 	var user;
 	var privileges = {};
 
-	function init(args) {
-		return promise.make(function(resolve, reject) {
-			user = args.user;
-			target = args.target;
+	function init(args, loaded) {
+		user = args.user;
+		target = args.target;
 
-			privileges.canChangeBrowsingSettings = auth.isLoggedIn(user.name) && user.name === auth.getCurrentUser().name;
+		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();
 			});
-		});
 	}
 
 	function render() {
@@ -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,9 +50,11 @@ App.Presenters.UserBrowsingSettingsPresenter = function(
 				unsafe: $el.find('[name=listUnsafePosts]').is(':checked'),
 			},
 		};
-		browsingSettings.setSettings(newSettings).then(function() {
-			messagePresenter.showInfo($messages, 'Browsing settings updated!');
-		});
+
+		browsingSettings.setSettings(newSettings)
+			.then(function() {
+				messagePresenter.showInfo($messages, 'Browsing settings updated!');
+			});
 	}
 
 	function getPrivileges() {
diff --git a/public_html/js/Presenters/UserListPresenter.js b/public_html/js/Presenters/UserListPresenter.js
index f86260a2..f47654b2 100644
--- a/public_html/js/Presenters/UserListPresenter.js
+++ b/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) {
-			listTemplate = _.template(listHtml);
-			itemTemplate = _.template(itemHtml);
+				util.promiseTemplate('user-list'),
+				util.promiseTemplate('user-list-item'))
+			.then(function(listHtml, itemHtml) {
+				listTemplate = _.template(listHtml);
+				itemTemplate = _.template(itemHtml);
 
-			render();
-			reinit(args);
-		});
+				render();
+				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() {
diff --git a/public_html/js/Presenters/UserPresenter.js b/public_html/js/Presenters/UserPresenter.js
index 800ed9ca..a46511f4 100644
--- a/public_html/js/Presenters/UserPresenter.js
+++ b/public_html/js/Presenters/UserPresenter.js
@@ -9,6 +9,7 @@ App.Presenters.UserPresenter = function(
 	api,
 	auth,
 	topNavigationPresenter,
+	presenterManager,
 	userBrowsingSettingsPresenter,
 	userAccountSettingsPresenter,
 	userAccountRemovalPresenter,
@@ -21,35 +22,40 @@ 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);
 
 		promise.waitAll(
-			util.promiseTemplate('user'),
-			api.get('/users/' + userName))
-		.then(function(
-				userHtml,
-				response) {
-			$messages = $el.find('.messages');
-			template = _.template(userHtml);
+				util.promiseTemplate('user'),
+				api.get('/users/' + userName))
+			.then(function(
+					userHtml,
+					response) {
+				$messages = $el.find('.messages');
+				template = _.template(userHtml);
 
-			user = response.json;
-			var extendedContext = _.extend(args, {user: user});
+				user = response.json;
+				var extendedContext = _.extend(args, {user: user});
 
-			promise.waitAll(
-				userBrowsingSettingsPresenter.init(_.extend(extendedContext, {target: '#browsing-settings-target'})),
-				userAccountSettingsPresenter.init(_.extend(extendedContext, {target: '#account-settings-target'})),
-				userAccountRemovalPresenter.init(_.extend(extendedContext, {target: '#account-removal-target'})))
-			.then(function() {
-				initTabs(args);
+				presenterManager.initPresenters([
+					[userBrowsingSettingsPresenter, _.extend({}, extendedContext, {target: '#browsing-settings-target'})],
+					[userAccountSettingsPresenter, _.extend({}, extendedContext, {target: '#account-settings-target'})],
+					[userAccountRemovalPresenter, _.extend({}, extendedContext, {target: '#account-removal-target'})]],
+					function() {
+						reinit(args, loaded);
+					});
+
+			}).fail(function(response) {
+				$el.empty();
+				messagePresenter.showError($messages, response.json && response.json.error || response);
 			});
+	}
 
-		}).fail(function(response) {
-			$el.empty();
-			messagePresenter.showError($messages, response.json && response.json.error || response);
-		});
+	function reinit(args, loaded) {
+		initTabs(args);
+		loaded();
 	}
 
 	function initTabs(args) {
@@ -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);
diff --git a/public_html/js/Router.js b/public_html/js/Router.js
index 1115ae6e..c3a9c827 100644
--- a/public_html/js/Router.js
+++ b/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) {