Changeset 35281

Timestamp:

10/20/2015 05:35:07 AM (9 years ago)

Author:

wonderboymusic

Message:

Theme Installer: toggle iframe-ready on the overlay to control the spinner animated GIF and high CPU usage.

Props afercia, adamsilverstein.
Fixes #33322.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (2 diffs)
• js/theme.js (modified) (3 diffs)

trunk/src/wp-admin/css/themes.css

@@ -1635 +1635 @@
 
 .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;
 }
 
@@ -1657 +1677 @@
     #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);
     }

trunk/src/wp-admin/js/theme.js

@@ -767 +767 @@
 
     render: function() {
-        var data = this.model.toJSON();
-
-        this.$el.html( this.html( data ) );
+        var self = this,
+            data = this.model.toJSON();
+
+        this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
 
         themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
@@ -777 +778 @@
             $( '.close-full-overlay' ).focus();
         });
+
+        this.$el.find( 'iframe' ).one( 'load', function() {
+            self.iframeLoaded();
+        });
+    },
+
+    iframeLoaded: function() {
+        this.$el.addClass( 'iframe-ready' );
     },
 
@@ -787 +796 @@
                 themes.focusedTheme.focus();
             }
-        });
+        }).removeClass( 'iframe-ready' );
 
         themes.router.navigate( themes.router.baseUrl( '' ) );