Changeset 20743

Timestamp:

05/08/2012 11:37:05 PM (13 years ago)

Author:

koopersmith

Message:

Theme Customizer: Add basic loading indicator when loading the customizer inside an iframe. see #19910.

Location:

trunk

Files:

• wp-admin/css/wp-admin.dev.css (modified) (2 diffs)
• wp-includes/js/customize-loader.dev.js (modified) (2 diffs)

trunk/wp-admin/css/wp-admin.dev.css

@@ -5325 +5325 @@
 }
 
+.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 {
@@ -5330 +5338 @@
     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;
 }
 

trunk/wp-includes/js/customize-loader.dev.js

@@ -51 +51 @@
                 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.
@@ -93 +95 @@
                 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');
         }
     };