From d5d0a7371907823b66e6d070b6d99b1bfc1dff99 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Tue, 8 May 2012 23:37:05 +0000
Subject: [PATCH] Theme Customizer: Add basic loading indicator when loading
 the customizer inside an iframe. see #19910.

git-svn-id: http://core.svn.wordpress.org/trunk@20743 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-admin/css/wp-admin.dev.css          | 14 ++++++++++++++
 wp-includes/js/customize-loader.dev.js |  7 ++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css
index 94a307b293..bb1676ad9e 100644
--- a/wp-admin/css/wp-admin.dev.css
+++ b/wp-admin/css/wp-admin.dev.css
@@ -5324,11 +5324,25 @@ body.full-overlay-active {
 	display: block;
 }
 
+.customize-loading #customize-container iframe {
+	opacity: 0;
+}
+
+.customize-loading #customize-container {
+	background: #fff url("../images/wpspin_light.gif") no-repeat fixed center center;
+}
+
 #customize-container iframe,
 #theme-installer iframe {
 	height: 100%;
 	width: 100%;
 	z-index: 20;
+
+	-webkit-transition: opacity 0.3s;
+	-moz-transition:    opacity 0.3s;
+	-ms-transition:     opacity 0.3s;
+	-o-transition:      opacity 0.3s;
+	transition:         opacity 0.3s;
 }
 
 #customize-container .collapse-sidebar {
diff --git a/wp-includes/js/customize-loader.dev.js b/wp-includes/js/customize-loader.dev.js
index 759e255c56..9eb5794dfa 100644
--- a/wp-includes/js/customize-loader.dev.js
+++ b/wp-includes/js/customize-loader.dev.js
@@ -50,8 +50,10 @@ if ( typeof wp === 'undefined' )
 			if ( this.active )
 				return;
 			this.active = true;
+			this.body.addClass('customize-loading');
 
 			this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
+			this.iframe.one( 'load', this.loaded );
 
 			// Create a postMessage connection with the iframe.
 			this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
@@ -92,8 +94,11 @@ if ( typeof wp === 'undefined' )
 				Loader.messenger.destroy();
 				Loader.iframe    = null;
 				Loader.messenger = null;
-				Loader.body.removeClass( 'customize-active full-overlay-active' );
+				Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
 			});
+		},
+		loaded: function() {
+			Loader.body.removeClass('customize-loading');
 		}
 	};