Ticket #24859: 24859.3.diff

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

@@ -5201 +5201 @@
         media.view.AttachmentsBrowser = media.View.extend({
                 tagName:   'div',
                 className: 'attachments-browser',
+                showSpinner: false,
 
                 initialize: function() {
                         _.defaults( this.options, {
@@ -5217 +5218 @@
 
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
+                toggleSpinner: function() {
+                        if ( ! this.showSpinner ) {
+                                this.showSpinner = true;
+                                // delay showing the spinner for 500ms and catch case where the spinner is toggled
+                                // before delay is finished
+                                _.delay( function( view ) {
+                                        if ( view.showSpinner ) {
+                                                view.toolbar.get('spinner').show();
+                                        }
+                                }, 600, this );
+                        } else {
+                                this.showSpinner = false;
+                                this.toolbar.get('spinner').hide();
+                        }
+                },
                 /**
                  * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
                  */
@@ -5253 +5269 @@
                                 }).render() );
                         }
 
+                        this.toolbar.set( 'spinner', new media.view.Spinner({
+                                priority: -70
+                        }) );
+
                         if ( this.options.search ) {
                                 this.toolbar.set( 'search', new media.view.Search({
                                         controller: this.controller,
@@ -5277 +5297 @@
                         }
 
                         if ( ! this.collection.length ) {
+                                this.toggleSpinner();
                                 this.collection.more().done( function() {
                                         if ( ! view.collection.length ) {
                                                 view.createUploader();
                                         }
+                                        view.toggleSpinner();
                                 });
                         }
                 },
@@ -6264 +6286 @@
                         this.$( '.embed-media-settings' ).scrollTop( 0 );
                 }
         });
+
+        /**
+         * wp.media.view.Spinner
+         *
+         *
+         * @constructor
+         * @augments wp.media.View
+         * @augments wp.Backbone.View
+         * @augments Backbone.View
+         */
+        media.view.Spinner = media.View.extend({
+                tagName:   'span',
+                className: 'spinner',
+
+                show: function() {
+                        this.$el.show();
+                        return this;
+                },
+
+                hide: function() {
+                        this.$el.hide();
+                        return this;
+                }
+        });
 }(jQuery, _));