Ticket #33322: 33322.3.patch

src/wp-admin/css/themes.css

@@ -1634 +1634 @@
 }
 
 .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 +1676 @@
 
         #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);
         }
 }

src/wp-admin/js/theme.js

@@ -766 +766 @@
         html: themes.template( 'theme-preview' ),
 
         render: function() {
-                var data = this.model.toJSON();
+                var self = this,
+                        data = this.model.toJSON(),
+                        $overlay = this.$el;
 
-                this.$el.html( this.html( data ) );
+                $overlay.removeClass( 'iframe-ready' ).html( this.html( data ) );
 
                 themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
 
-                this.$el.fadeIn( 200, function() {
+                $overlay.fadeIn( 200, function() {
                         $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
                         $( '.close-full-overlay' ).focus();
                 });
+
+                $overlay.find( 'iframe' ).one( 'load', function() {
+                        self.iframeLoaded();
+                });
         },
 
+        iframeLoaded: function() {
+                this.$el.addClass( 'iframe-ready' );
+        },
+
         close: function() {
                 this.$el.fadeOut( 200, function() {
                         $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
@@ -786 +796 @@
                         if ( themes.focusedTheme ) {
                                 themes.focusedTheme.focus();
                         }
-                });
+                }).removeClass( 'iframe-ready' );
 
                 themes.router.navigate( themes.router.baseUrl( '' ) );
                 this.trigger( 'preview:close' );