Changeset 27438

Timestamp:

03/06/2014 05:45:26 PM (11 years ago)

Author:

wonderboymusic

Message:

Add a loading indicator to the Media Library.

Props kadamwhite, gcorne, kovshenin.
Fixes #24859.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (1 diff)
• js/media-views.js (modified) (4 diffs)

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

@@ -1291 +1291 @@
 }
 
+.media-toolbar .spinner {
+    margin-top: 14px;
+}
+
 .media-sidebar .settings-save-status {
     background: #f5f5f5;

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

@@ -5255 +5255 @@
             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
@@ -5291 +5301 @@
             }
 
+            this.toolbar.set( 'spinner', new media.view.Spinner({
+                priority: -70
+            }) );
+
             if ( this.options.search ) {
                 this.toolbar.set( 'search', new media.view.Search({
@@ -5315 +5329 @@
 
             if ( ! this.collection.length ) {
-                this.collection.more().done( function() {
+                this.toggleSpinner( true );
+                this.collection.more().done(function() {
                     if ( ! view.collection.length ) {
                         view.createUploader();
                     }
+                    view.toggleSpinner( false );
                 });
             }
@@ -6314 +6330 @@
         }
     });
+
+    /**
+     * 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, _));