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

@@ -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 {

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');
 		}
 	};