Changeset 27516

Timestamp:

03/12/2014 09:06:30 PM (12 years ago)

Author:

helen

Message:

Smooth out some display and race condition issues with the media modal loading spinner. props kadamwhite, gcorne. see #24859.

File:

• trunk/src/wp-includes/js/media-views.js (modified) (6 diffs)

trunk/src/wp-includes/js/media-views.js

@@ -5206 +5206 @@
 
                 scroll: function() {
+                        var view = this,
+                                toolbar;
+
                         // @todo: is this still necessary?
                         if ( ! this.$el.is(':visible') ) {
@@ -5212 +5215 @@
 
                         if ( this.collection.hasMore() && this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
-                                this.collection.more().done( this.scroll );
+                                toolbar = this.views.parent.toolbar;
+                                toolbar.get('spinner').show();
+
+                                this.collection.more().done(function() {
+                                        view.scroll();
+                                        toolbar.get('spinner').hide();
+                                });
                         }
                 }
@@ -5452 +5461 @@
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
-                toggleSpinner: function( state ) {
-                        if ( state ) {
-                                this.spinnerTimeout = _.delay(function( view ) {
-                                        view.toolbar.get( 'spinner' ).show();
-                                }, 600, this );
-                        } else {
-                                this.toolbar.get( 'spinner' ).hide();
-                                clearTimeout( this.spinnerTimeout );
-                        }
-                },
                 /**
                  * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
@@ -5526 +5525 @@
 
                         if ( ! this.collection.length ) {
-                                this.toggleSpinner( true );
+                                this.toolbar.get( 'spinner' ).show();
                                 this.collection.more().done(function() {
                                         if ( ! view.collection.length ) {
                                                 view.createUploader();
                                         }
-                                        view.toggleSpinner( false );
+                                        view.toolbar.get( 'spinner' ).hide();
                                 });
                         }
@@ -6765 +6764 @@
                 tagName:   'span',
                 className: 'spinner',
+                spinnerTimeout: false,
+                delay: 400,
 
                 show: function() {
-                        this.$el.show();
+                        if ( ! this.spinnerTimeout ) {
+                                this.spinnerTimeout = _.delay(function( $el ) {
+                                        $el.show();
+                                }, this.delay, this.$el );
+                        }
+
                         return this;
                 },
@@ -6773 +6779 @@
                 hide: function() {
                         this.$el.hide();
+                        this.spinnerTimeout = clearTimeout( this.spinnerTimeout );
+
                         return this;
                 }