fix(views): show spinner when ajax loading walled garden forms

fixes #5612

views/default/js/walled_garden.php

@@ -17,7 +17,8 @@
 elgg.provide('elgg.walled_garden');
 
 elgg.walled_garden.init = function () {
-
+	// make sure it is loaded before using it in the click events
+	require(['elgg/spinner']);
 	$('.forgot_link').click(elgg.walled_garden.load('lost_password'));
 	$('.registration_link').click(elgg.walled_garden.load('register'));
 
@@ -40,26 +41,32 @@
  */
 elgg.walled_garden.load = function(view) {
 	return function(event) {
-		var id = '#elgg-walledgarden-' + view;
-		id = id.replace('_', '-');
-		// @todo display some visual element that indicates that loading of content is running
-		elgg.get('walled_garden/' + view, {
-			'success' : function(data) {
-				var $wg = $('.elgg-body-walledgarden');
-				$wg.append(data);
-				$(id).find('input.elgg-button-submit').after(<?php echo $cancel_button; ?>);
-
-				if (view == 'register' && $wg.hasClass('hidden')) {
-					// this was a failed registration, display the register form ASAP
-					$('#elgg-walledgarden-login').toggle(false);
-					$(id).toggle();
-					$wg.removeClass('hidden');
-				} else {
-					$('#elgg-walledgarden-login').fadeToggle();
-					$(id).fadeToggle();
-				}
-			}
+		require(['elgg/spinner'], function(spinner) {
+			var id = '#elgg-walledgarden-' + view;
+			id = id.replace('_', '-');
+			// @todo display some visual element that indicates that loading of content is running
+			elgg.get('walled_garden/' + view, {
+				beforeSend: spinner.start,
+				complete: spinner.stop,
+				success: function(data) {
+					var $wg = $('.elgg-body-walledgarden');
+					$wg.append(data);
+					$(id).find('input.elgg-button-submit').after(<?php echo $cancel_button; ?>);
+
+					if (view == 'register' && $wg.hasClass('hidden')) {
+						// this was a failed registration, display the register form ASAP
+						$('#elgg-walledgarden-login').toggle(false);
+						$(id).toggle();
+						$wg.removeClass('hidden');
+					} else {
+						$('#elgg-walledgarden-login').fadeToggle();
+						$(id).fadeToggle();
+					}
+				}			
+			});
+
 		});
+
 		event.preventDefault();
 	};
 };