Ticket #31196: 31196.4.patch

src/wp-admin/css/themes.css

@@ -1357 +1357 @@
         height: 100%;
 }
 
+#customize-preview.wp-full-overlay-main {
+        background: url(../images/spinner.gif) no-repeat;
+        -webkit-background-size: 20px 20px;
+        background-size: 20px 20px;
+        background-position: center center;
+}
+
 .wp-full-overlay-sidebar .wp-full-overlay-header {
         position: absolute;
         left: 0;

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

@@ -1769 +1769 @@
                 refresh: function() {
                         var self = this;
 
+                        // Display loading indicator
+                        this.send( 'loading' );
+
                         this.abort();
 
                         this.loading = new api.PreviewFrame({

src/wp-includes/class-wp-customize-manager.php

@@ -432 +432 @@
                 add_action( 'wp', array( $this, 'customize_preview_override_404_status' ) );
                 add_action( 'wp_head', array( $this, 'customize_preview_base' ) );
                 add_action( 'wp_head', array( $this, 'customize_preview_html5' ) );
+                add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
                 add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
                 add_action( 'shutdown', array( $this, 'customize_preview_signature' ), 1000 );
                 add_filter( 'wp_die_handler', array( $this, 'remove_preview_signature' ) );
@@ -491 +492 @@
                 <![endif]--><?php
         }
 
+        public function customize_preview_loading_style() {
+                ?><style>
+                        body.customizer-navigating-away {
+                                opacity: 0.25;
+                                cursor: progress !important;
+                        }
+                        body.customizer-navigating-away * {
+                                pointer-events: none !important;
+                        }
+                </style><?php
+        }
+
         /**
          * Print JavaScript settings for preview frame.
          *

src/wp-includes/js/customize-preview.js

@@ -64 +64 @@
 
         $( function() {
                 api.settings = window._wpCustomizeSettings;
+                api.l10n = window._wpCustomizePreviewL10n;
                 if ( ! api.settings )
                         return;
 
@@ -115 +116 @@
                         activeControls: api.settings.activeControls
                 } );
 
+                // Display a loading indicator when preview is reloading
+                api.preview.bind( 'loading', function () {
+                        $( 'body' ).addClass( 'customizer-navigating-away' );
+                        $( 'html' ).prop( 'title', api.l10n.loading );
+                });
+
                 /* Custom Backgrounds */
                 bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
                         return 'background_' + prop;

src/wp-includes/script-loader.php

@@ -382 +382 @@
         $scripts->add( 'customize-base',     "/wp-includes/js/customize-base$suffix.js",     array( 'jquery', 'json2', 'underscore' ), false, 1 );
         $scripts->add( 'customize-loader',   "/wp-includes/js/customize-loader$suffix.js",   array( 'customize-base' ), false, 1 );
         $scripts->add( 'customize-preview',  "/wp-includes/js/customize-preview$suffix.js",  array( 'customize-base' ), false, 1 );
+        did_action( 'init' ) && $scripts->localize( 'customize-preview', '_wpCustomizePreviewL10n', array(
+                'loading'  => __( 'Loading ...' ),
+        ) );
+
         $scripts->add( 'customize-models',   "/wp-includes/js/customize-models.js", array( 'underscore', 'backbone' ), false, 1 );
         $scripts->add( 'customize-views',    "/wp-includes/js/customize-views.js",  array( 'jquery', 'underscore', 'imgareaselect', 'customize-models' ), false, 1 );
         $scripts->add( 'customize-controls', "/wp-admin/js/customize-controls$suffix.js", array( 'customize-base' ), false, 1 );