From f07367d34ce78d332f996f19fb819c208706e074 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Tue, 20 Oct 2015 05:35:07 +0000
Subject: [PATCH] Theme Installer: toggle `iframe-ready` on the overlay to
 control the spinner animated GIF and high CPU usage.

Props afercia, adamsilverstein.
Fixes #33322.


git-svn-id: https://develop.svn.wordpress.org/trunk@35281 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/themes.css | 22 +++++++++++++++++++++-
 src/wp-admin/js/theme.js    | 15 ++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 19250f75c6..114fcdf499 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/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);
 	}
 }
diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index 919969db1d..0961922bd8 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/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' );