Changeset 27516

Timestamp:

03/12/2014 09:06:30 PM (11 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;
         }