Ticket #31196: 31196.patch

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

@@ -2153 +2153 @@
                         api.previewer.previewUrl( api.settings.url.home );
                 }
 
+                // Trigger 'unload' event when user navigate around during preview
+                api.previewer.previewUrl.bind(function () {
+                        api.previewer.send( 'unload' );
+                });
+
                 // Save and activated states
                 (function() {
                         var state = new api.Values(),

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

@@ -115 +115 @@
                         activeControls: api.settings.activeControls
                 } );
 
+                // Display a loading indicator when user navigate around during preview
+                api.preview.bind( 'unload', function () {
+                        $( 'body' ).addClass( 'customizer-navigating-away' );
+                        $( 'html' ).prop( 'title', 'Loading...' );
+                });
+
                 /* Custom Backgrounds */
                 bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
                         return 'background_' + prop;