Theme Installer: toggle iframe-ready on the overlay to control the spinner animated GIF and high CPU usage.

Props afercia, adamsilverstein.
Fixes #33322.

Built from https://develop.svn.wordpress.org/trunk@35281


git-svn-id: http://core.svn.wordpress.org/trunk@35247 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/themes-rtl.css

@@ -1634,11 +1634,31 @@ body.full-overlay-active {
 }
 
 .theme-install-overlay .wp-full-overlay-main {
+	position: relative;
+	z-index: 0;
+	background-color: #fff;
+}
+
+.theme-install-overlay .wp-full-overlay-main:before {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	right: 50%;
+	top: 50%;
+	z-index: -1;
+	margin: -10px -10px 0 0;
+	transform: translateZ(0);
 	background: #fff url(../images/spinner.gif) no-repeat center center;
 	-webkit-background-size: 20px 20px;
 	background-size: 20px 20px;
 }
 
+.theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
+	background-image: none;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 
@@ -1656,7 +1676,7 @@ body.full-overlay-active {
 
 	#customize-preview.wp-full-overlay-main,
 	.customize-loading #customize-container,
-	.theme-install-overlay .wp-full-overlay-main {
+	.theme-install-overlay .wp-full-overlay-main:before {
 		background-image: url(../images/spinner-2x.gif);
 	}
 }

wp-admin/css/themes.css

@@ -1634,11 +1634,31 @@ body.full-overlay-active {
 }
 
 .theme-install-overlay .wp-full-overlay-main {
+	position: relative;
+	z-index: 0;
+	background-color: #fff;
+}
+
+.theme-install-overlay .wp-full-overlay-main:before {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	z-index: -1;
+	margin: -10px 0 0 -10px;
+	transform: translateZ(0);
 	background: #fff url(../images/spinner.gif) no-repeat center center;
 	-webkit-background-size: 20px 20px;
 	background-size: 20px 20px;
 }
 
+.theme-install-overlay.iframe-ready .wp-full-overlay-main:before {
+	background-image: none;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 
@@ -1656,7 +1676,7 @@ body.full-overlay-active {
 
 	#customize-preview.wp-full-overlay-main,
 	.customize-loading #customize-container,
-	.theme-install-overlay .wp-full-overlay-main {
+	.theme-install-overlay .wp-full-overlay-main:before {
 		background-image: url(../images/spinner-2x.gif);
 	}
 }

wp-admin/js/theme.js

@@ -766,9 +766,10 @@ themes.view.Preview = themes.view.Details.extend({
 	html: themes.template( 'theme-preview' ),
 
 	render: function() {
-		var data = this.model.toJSON();
+		var self = this,
+			data = this.model.toJSON();
 
-		this.$el.html( this.html( data ) );
+		this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
 
 		themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
 
@@ -776,6 +777,14 @@ themes.view.Preview = themes.view.Details.extend({
 			$( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
 			$( '.close-full-overlay' ).focus();
 		});
+
+		this.$el.find( 'iframe' ).one( 'load', function() {
+			self.iframeLoaded();
+		});
+	},
+
+	iframeLoaded: function() {
+		this.$el.addClass( 'iframe-ready' );
 	},
 
 	close: function() {
@@ -786,7 +795,7 @@ themes.view.Preview = themes.view.Details.extend({
 			if ( themes.focusedTheme ) {
 				themes.focusedTheme.focus();
 			}
-		});
+		}).removeClass( 'iframe-ready' );
 
 		themes.router.navigate( themes.router.baseUrl( '' ) );
 		this.trigger( 'preview:close' );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-alpha-35280';
+$wp_version = '4.4-alpha-35281';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.