Customizer: Add loading indicators for the Customizer preview.

props Fab1en, westonruter.
fixes #31196.

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

src/wp-admin/css/themes.css

@@ -1352,6 +1352,16 @@ body.full-overlay-active {
 	height: 100%;
 }
 
+#customize-preview.wp-full-overlay-main {
+	background: url(../images/spinner.gif) no-repeat center center;
+	-webkit-background-size: 20px 20px;
+	background-size: 20px 20px;
+}
+
+#customize-preview.wp-full-overlay-main.iframe-ready {
+	background: none;
+}
+
 .wp-full-overlay-sidebar .wp-full-overlay-header {
 	position: absolute;
 	left: 0;
@@ -1710,6 +1720,7 @@ body.full-overlay-active {
 		background-size: 15px 123px;
 	}
 
+	#customize-preview.wp-full-overlay-main,
 	.customize-loading #customize-container,
 	.theme-install-overlay .wp-full-overlay-main {
 		background-image: url(../images/spinner-2x.gif);

src/wp-admin/js/customize-controls.js

@@ -1914,6 +1914,9 @@
 			this.bind( 'ready', this._ready );
 
 			this.bind( 'ready', function ( data ) {
+
+				this.container.addClass( 'iframe-ready' );
+
 				if ( ! data ) {
 					return;
 				}
@@ -2217,6 +2220,9 @@
 		refresh: function() {
 			var self = this;
 
+			// Display loading indicator
+			this.send( 'loading-initiated' );
+
 			this.abort();
 
 			this.loading = new api.PreviewFrame({
@@ -2249,8 +2255,10 @@
 			});
 
 			this.loading.fail( function( reason, location ) {
-				if ( 'redirect' === reason && location )
+				self.send( 'loading-failed' );
+				if ( 'redirect' === reason && location ) {
 					self.previewUrl( location );
+				}
 
 				if ( 'logged out' === reason ) {
 					if ( self.preview ) {
@@ -2261,8 +2269,9 @@
 					self.login().done( self.refresh );
 				}
 
-				if ( 'cheatin' === reason )
+				if ( 'cheatin' === reason ) {
 					self.cheatin();
+				}
 			});
 		},