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
This commit is contained in:
koopersmith 2012-05-08 23:37:05 +00:00
parent 484bf6e4ef
commit d5d0a73719
2 changed files with 20 additions and 1 deletions

View File

@ -5324,11 +5324,25 @@ body.full-overlay-active {
display: block; 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, #customize-container iframe,
#theme-installer iframe { #theme-installer iframe {
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 20; 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 { #customize-container .collapse-sidebar {

View File

@ -50,8 +50,10 @@ if ( typeof wp === 'undefined' )
if ( this.active ) if ( this.active )
return; return;
this.active = true; this.active = true;
this.body.addClass('customize-loading');
this.iframe = $( '<iframe />', { src: src }).appendTo( this.element ); this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
this.iframe.one( 'load', this.loaded );
// Create a postMessage connection with the iframe. // Create a postMessage connection with the iframe.
this.messenger = new api.Messenger( src, this.iframe[0].contentWindow ); this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
@ -92,8 +94,11 @@ if ( typeof wp === 'undefined' )
Loader.messenger.destroy(); Loader.messenger.destroy();
Loader.iframe = null; Loader.iframe = null;
Loader.messenger = 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');
} }
}; };