Authentication modal dialog: the spinner should disappear when loading is done.

Also, when using spinners as background images, the re-painted area should be the
smallest possible one. See similar performance issue in #33311.

Fixes #34951.

git-svn-id: https://develop.svn.wordpress.org/trunk@35925 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/css/wp-auth-check.css

@@ -48,14 +48,38 @@
 }
 
 #wp-auth-check-wrap #wp-auth-check-form {
-	background: url(../images/spinner-2x.gif) no-repeat center center;
-	-webkit-background-size: 16px 16px;
-	background-size: 16px 16px;
 	height: 100%;
+	position: relative;
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
 
+#wp-auth-check-form.loading:before {
+	content: "";
+	display: block;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin: -10px 0 0 -10px;
+	background: url(../images/spinner.gif) no-repeat center;
+	-webkit-background-size: 20px 20px;
+	background-size: 20px 20px;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+}
+
+@media print,
+  (-webkit-min-device-pixel-ratio: 1.25),
+  (min-resolution: 120dpi) {
+
+	#wp-auth-check-form.loading:before {
+		background-image: url(../images/spinner-2x.gif);
+	}
+
+}
+
 #wp-auth-check-wrap #wp-auth-check-form iframe {
 	height: 98%; /* Scrollbar fix */
 	width: 100%;

src/wp-includes/functions.php

@@ -4939,7 +4939,7 @@ function wp_auth_check_html() {
 
 	if ( $same_domain ) {
 		?>
-		<div id="wp-auth-check-form" data-src="<?php echo esc_url( add_query_arg( array( 'interim-login' => 1 ), $login_url ) ); ?>"></div>
+		<div id="wp-auth-check-form" class="loading" data-src="<?php echo esc_url( add_query_arg( array( 'interim-login' => 1 ), $login_url ) ); ?>"></div>
 		<?php
 	}
 

src/wp-includes/js/wp-auth-check.js

@@ -20,6 +20,8 @@
 				var height, body;
 
 				loaded = true;
+				// Remove the spinner to avoid unnecessary CPU/GPU usage.
+				form.removeClass( 'loading' );
 
 				try {
 					body = $(this).contents().find('body');
@@ -46,7 +48,7 @@
 				}
 			}).attr( 'src', form.data('src') );
 
-			$('#wp-auth-check-form').append( frame );
+			form.append( frame );
 		}
 
 		$( 'body' ).addClass( 'modal-open' );