[wp-trac] [WordPress Trac] #31196: Loading indicators for the Customizer preview

[WordPress Trac]

#31196: Loading indicators for the Customizer preview
----------------------------------------+-----------------------------
 Reporter:  celloexpressions            |       Owner:
     Type:  enhancement                 |      Status:  new
 Priority:  normal                      |   Milestone:  Future Release
Component:  Customize                   |     Version:  3.4
 Severity:  normal                      |  Resolution:
 Keywords:  good-first-bug needs-patch  |     Focuses:  ui
----------------------------------------+-----------------------------

Comment (by westonruter):

 +1

 This is also a problem when navigating around the site within the preview:
 you click on a link and nothing seems to happen for awhile, especially if
 the site or the connection is slow. So there should be a loading indicator
 when the preview first loads, and then the loading indicator should appear
 when navigating to another URL.

 I implemented something for the latter situation of showing a loading
 indicator when navigating around the site in the preview.

 In `customize-controls.js`, we can add:

 {{{#!js
 wp.customize.previewer.previewUrl.bind(function () {
     wp.customize.previewer.send( 'unload' );
 });
 }}}

 And then in `customize-preview.js` add:

 {{{#!js
 wp.customize.preview.bind( 'unload', function () {
     jQuery( 'body' ).addClass( 'customizer-navigating-away' );
     jQuery( 'html' ).prop( 'title', 'Loading...' );
 })
 }}}

 And then we can add this CSS to the Customizer preview:

 {{{#!css
 body.customizer-navigating-away {
         transition: opacity 1s;
         opacity: 0.25;
         cursor: progress !important;
 }
 body.customizer-navigating-away * {
         pointer-events: none !important;
 }
 }}}

 The result is that the contents of the Customizer preview fade to 0.25
 opacity, a progress cursor appears along with a “Loading…” tooltip, and
 finally clicking is disabled on the preview until the page refreshes.
 Again, this is only addressing the UX issues when navigating around the
 site in the preview.

 As an aside: transactions (#30937) will improve the loading experience
 since the iframe would be populated with the natural URL (#30028) as
 opposed to fetching the contents via Ajax and then `document.write`'ing
 them: the browser's normal loading indicators would appear.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31196#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform