refactored widgets api call to render all at once rather than one area at a time, closes https://github.com/NodeBB/NodeBB/issues/2062

public/src/widgets.js

@@ -30,60 +30,56 @@
 			ajaxify.widgets.reposition();
 		}
 
-		function renderWidgets(location) {
-			var area = $('#content [widget-area="' + location + '"]'),
-				areaData = {
-					location: location,
-					template: template + '.tpl',
-					url: url
-				};
-
-			$.get(RELATIVE_PATH + '/api/widgets/render', areaData, function(renderedWidgets) {
-				var html = '';
-
-				for (var i=0; i<renderedWidgets.length; ++i) {
-					html += templates.parse(renderedWidgets[i].html, {});
-				}
-
-				if (!area.length && window.location.pathname.indexOf('/admin') === -1 && renderedWidgets.length) {
-					if (location === 'footer' && !$('#content [widget-area="footer"]').length) {
-						$('#content').append($('<div class="col-xs-12"><div widget-area="footer"></div></div>'));
-					} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) {
-						$('#content > *').wrapAll($('<div class="col-lg-9 col-xs-12"></div>'));
-						$('#content').append($('<div class="col-lg-3 col-xs-12"><div widget-area="sidebar"></div></div>'));
-					} else if (location === 'header' && !$('#content [widget-area="header"]').length) {
-						$('#content').prepend($('<div class="col-xs-12"><div widget-area="header"></div></div>'));
+		function renderWidgets(locations) {
+			var areaDatas = [];
+
+			$.get(RELATIVE_PATH + '/api/widgets/render', {
+				locations: locations,
+				template: template + '.tpl',
+				url: url
+			}, function(renderedAreas) {
+				for (var x=0; x<renderedAreas.length; ++x) {
+					var renderedWidgets = renderedAreas[x].widgets,
+						location = renderedAreas[x].location,
+						html = '';
+
+					for (var i=0; i<renderedWidgets.length; ++i) {
+						html += templates.parse(renderedWidgets[i].html, {});
 					}
 
-					area = $('#content [widget-area="' + location + '"]');
-				}
+					var area = $('#content [widget-area="' + location + '"]');
 
-				area.html(html);
+					if (!area.length && window.location.pathname.indexOf('/admin') === -1 && renderedWidgets.length) {
+						if (location === 'footer' && !$('#content [widget-area="footer"]').length) {
+							$('#content').append($('<div class="col-xs-12"><div widget-area="footer"></div></div>'));
+						} else if (location === 'sidebar' && !$('#content [widget-area="sidebar"]').length) {
+							$('#content > *').wrapAll($('<div class="col-lg-9 col-xs-12"></div>'));
+							$('#content').append($('<div class="col-lg-3 col-xs-12"><div widget-area="sidebar"></div></div>'));
+						} else if (location === 'header' && !$('#content [widget-area="header"]').length) {
+							$('#content').prepend($('<div class="col-xs-12"><div widget-area="header"></div></div>'));
+						}
 
-				if (!renderedWidgets.length) {
-					area.addClass('hidden');
-					ajaxify.widgets.reposition(location);
-				}
+						area = $('#content [widget-area="' + location + '"]');
+					}
 
-				$('#content [widget-area] img:not(.user-img)').addClass('img-responsive');
-				checkCallback();
-			});
-		}
+					area.html(html);
 
-		function checkCallback() {
-			numLocations--;
-			if (numLocations < 0) {
+					if (!renderedWidgets.length) {
+						area.addClass('hidden');
+						ajaxify.widgets.reposition(location);
+					}
+
+					$('#content [widget-area] img:not(.user-img)').addClass('img-responsive');	
+				}
+				
 				$(window).trigger('action:widgets.loaded', {});
+				
 				if (typeof callback === 'function') {
 					callback();
 				}
-			}
-		}
-
-		for (var i=0; i<widgetLocations.length; ++i) {
-			renderWidgets(widgetLocations[i]);
+			});
 		}
 
-		checkCallback();
+		renderWidgets(widgetLocations);
 	};
 }(ajaxify || {}));

src/controllers/api.js

@@ -84,19 +84,34 @@ apiController.getConfig = function(req, res, next) {
 
 
 apiController.renderWidgets = function(req, res, next) {
-	var uid = req.user ? req.user.uid : 0,
-		area = {
+	var async = require('async'),
+		uid = req.user ? req.user.uid : 0,
+		areas = {
 			template: req.query.template,
-			location: req.query.location,
+			locations: req.query.locations,
 			url: req.query.url
-		};
+		},
+		renderedWidgets = [];
 
-	if (!area.template || !area.location) {
+	if (!areas.template || !areas.locations) {
 		return res.json(200, {});
 	}
 
-	widgets.render(uid, area, function(err, data) {
-		res.json(200, data);
+	async.each(areas.locations, function(location, next) {
+		widgets.render(uid, {
+			template: areas.template,
+			url: areas.url,
+			location: location
+		}, function(err, widgets) {
+			renderedWidgets.push({
+				location: location,
+				widgets: widgets
+			});
+
+			next();
+		});
+	}, function(err) {
+		res.json(200, renderedWidgets);
 	});
 };