[ticket/11928] Replace AJAX loading popup with animation.

PHPBB3-11928

phpBB/adm/style/admin.css

@@ -1593,6 +1593,20 @@ input.button1:focus, input.button2:focus, input.button3:focus {
 	}
 }
 
+#loading_indicator {
+	background: #000000 url("../images/loading.gif") center center no-repeat;
+	border-radius: 5px;
+	display: none;
+	opacity: 0.8;
+	margin-top: -50px;
+	margin-left: -50px;
+	height: 50px;
+	width: 50px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+}
+
 /* Pagination
 ---------------------------------------- */
 .pagination {

phpBB/adm/style/overall_footer.html

@@ -17,8 +17,8 @@
 
 		<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 			<div id="darken">&nbsp;</div>
-			<div class="jalert" id="loadingalert"><h3>{L_LOADING}</h3><p>{L_PLEASE_WAIT}</p></div>
 		</div>
+		<div id="loading_indicator"></div>
 
 		<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
 			<a href="#" class="alert_close"></a>

phpBB/assets/javascript/core.js

@@ -12,7 +12,7 @@ var keymap = {
 };
 
 var dark = $('#darkenwrapper');
-var loadingAlert = $('#loadingalert');
+var loadingAlert = $('#loading_indicator');
 var phpbbAlertTimer = null;
 
 
@@ -22,18 +22,14 @@ var phpbbAlertTimer = null;
  * @returns object Returns loadingAlert.
  */
 phpbb.loadingAlert = function() {
-	if (dark.is(':visible')) {
+	if (!loadingAlert.is(':visible')) {
 		loadingAlert.fadeIn(phpbb.alertTime);
-	} else {
+		// Wait fifteen seconds and display an error if nothing has been returned by then.
-		loadingAlert.show();
+		phpbbAlertTimer = setTimeout(function() {
-		dark.fadeIn(phpbb.alertTime, function() {
+			if (loadingAlert.is(':visible')) {
-			// Wait fifteen seconds and display an error if nothing has been returned by then.
+				phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req'));
-			phpbbAlertTimer = setTimeout(function() {
+			}
-				if (loadingAlert.is(':visible')) {
+		}, 15000);
-					phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req'));
-				}
-			}, 15000);
-		});
 	}
 
 	return loadingAlert;
@@ -66,6 +62,10 @@ phpbb.alert = function(title, msg, fadedark) {
 	div.find('.alert_title').html(title);
 	div.find('.alert_text').html(msg);
 
+	if (!dark.is(':visible')) {
+		dark.fadeIn(phpbb.alertTime);
+	}
+
 	div.bind('click', function(e) {
 		e.stopPropagation();
 	});
@@ -131,6 +131,10 @@ phpbb.confirm = function(msg, callback, fadedark) {
 	var div = $('#phpbb_confirm');
 	div.find('.alert_text').html(msg);
 
+	if (!dark.is(':visible')) {
+		dark.fadeIn(phpbb.alertTime);
+	}
+
 	div.bind('click', function(e) {
 		e.stopPropagation();
 	});
@@ -372,13 +376,16 @@ phpbb.ajaxify = function(options) {
 			phpbb.loadingAlert();
 		}
 
-		$.ajax({
+		var request = $.ajax({
 			url: action,
 			type: method,
 			data: data,
 			success: returnHandler,
 			error: errorHandler
 		});
+		request.always(function() {
+			loadingAlert.fadeOut(phpbb.alertTime);
+		});
 
 		event.preventDefault();
 	});

phpBB/styles/prosilver/template/overall_footer.html

@@ -34,8 +34,8 @@
 
 	<div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
 		<div id="darken">&nbsp;</div>
-		<div class="phpbb_alert" id="loadingalert"><h3>{L_LOADING}</h3><p>{L_PLEASE_WAIT}</p></div>
 	</div>
+	<div id="loading_indicator"></div>
 
 	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
 		<a href="#" class="alert_close"></a>

phpBB/styles/prosilver/theme/colours.css

@@ -1104,6 +1104,11 @@ input.disabled {
 	background-color: #000000;
 }
 
+#loading_indicator {
+	background-color: #000000;
+	background-image: url("./images/loading.gif");
+}
+
 #notification_list ul li {
 	border-bottom-color: #B9B9B9;
 }

phpBB/styles/prosilver/theme/common.css

@@ -821,6 +821,20 @@ li.pagination ul {
 	opacity: 0.5;
 }
 
+#loading_indicator {
+	background: center center no-repeat;
+	border-radius: 5px;
+	display: none;
+	opacity: 0.8;
+	margin-top: -50px;
+	margin-left: -50px;
+	height: 50px;
+	width: 50px;
+	position: fixed;
+	left: 50%;
+	top: 50%;
+}
+
 /* Miscellaneous styles
 ---------------------------------------- */
 #forum-permissions {