New: show indicator when testing indexers, connections and download clients

src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js

@@ -19,7 +19,8 @@ define([
 
         ui: {
             path      : '.x-path',
-            modalBody : '.modal-body'
+            modalBody : '.modal-body',
+            indicator : '.x-indicator'
         },
 
         events: {
@@ -44,6 +45,8 @@ define([
         },
 
         _save: function () {
+            this.ui.indicator.show();
+
             var self = this;
             var promise = this.model.save();
 
@@ -52,10 +55,16 @@ define([
                     self.targetCollection.add(self.model, { merge: true });
                     vent.trigger(vent.Commands.CloseModalCommand);
                 });
+
+                promise.fail(function () {
+                    self.ui.indicator.hide();
+                });
             }
         },
 
         _saveAndAdd: function () {
+            this.ui.indicator.show();
+
             var self = this;
             var promise = this.model.save();
 
@@ -65,6 +74,10 @@ define([
 
                     require('Settings/DownloadClient/Add/DownloadClientSchemaModal').open(self.targetCollection);
                 });
+
+                promise.fail(function () {
+                    self.ui.indicator.hide();
+                });
             }
         },
 
@@ -78,7 +91,13 @@ define([
         },
 
         _test: function () {
-            this.model.test();
+            var self = this;
+
+            this.ui.indicator.show();
+
+            this.model.test().always(function () {
+                self.ui.indicator.hide();
+            });
         }
     });
 

src/UI/Settings/DownloadClient/Edit/DownloadClientEditViewTemplate.html

@@ -46,6 +46,7 @@
                 <button class="btn pull-left x-back">back</button>
             {{/if}}
 
+            <span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
             <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
             <button class="btn" data-dismiss="modal">cancel</button>
 

src/UI/Settings/Indexers/Edit/IndexerEditView.js

@@ -8,22 +8,25 @@ define([
     'Commands/CommandController',
     'Mixins/AsModelBoundView',
     'Mixins/AsValidatedView',
-    'underscore',
     'Form/FormBuilder',
     'Mixins/AutoComplete',
     'bootstrap'
-], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, _) {
+], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView) {
 
     var view = Marionette.ItemView.extend({
         template: 'Settings/Indexers/Edit/IndexerEditViewTemplate',
 
+        ui: {
+            indicator : '.x-indicator'
+        },
+
         events: {
-            'click .x-save'        : '_save',
-            'click .x-save-and-add': '_saveAndAdd',
-            'click .x-delete'      : '_delete',
-            'click .x-back'        : '_back',
-            'click .x-close'       : '_close',
-            'click .x-test'        : '_test'
+            'click .x-save'         : '_save',
+            'click .x-save-and-add' : '_saveAndAdd',
+            'click .x-delete'       : '_delete',
+            'click .x-back'         : '_back',
+            'click .x-close'        : '_close',
+            'click .x-test'         : '_test'
         },
 
         initialize: function (options) {
@@ -31,6 +34,8 @@ define([
         },
 
         _save: function () {
+            this.ui.indicator.show();
+
             var self = this;
             var promise = this.model.save();
 
@@ -39,10 +44,16 @@ define([
                     self.targetCollection.add(self.model, { merge: true });
                     vent.trigger(vent.Commands.CloseModalCommand);
                 });
+
+                promise.fail(function () {
+                    self.ui.indicator.hide();
+                });
             }
         },
 
         _saveAndAdd: function () {
+            this.ui.indicator.show();
+
             var self = this;
             var promise = this.model.save();
 
@@ -52,6 +63,10 @@ define([
 
                     require('Settings/Indexers/Add/IndexerSchemaModal').open(self.targetCollection);
                 });
+
+                promise.fail(function () {
+                    self.ui.indicator.hide();
+                });
             }
         },
 
@@ -82,7 +97,13 @@ define([
         },
 
         _test: function () {
-            this.model.test();
+            var self = this;
+
+            this.ui.indicator.show();
+
+            this.model.test().always(function () {
+                self.ui.indicator.hide();
+            });
         }
     });
 

src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html

@@ -45,7 +45,7 @@
             {{else}}
                 <button class="btn pull-left x-back">back</button>
             {{/if}}
-
+            <span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
             <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
             <button class="btn x-close">cancel</button>
 

src/UI/Settings/Notifications/Edit/NotificationEditView.js

@@ -16,9 +16,10 @@ define([
         template: 'Settings/Notifications/Edit/NotificationEditViewTemplate',
 
         ui: {
-            onDownloadToggle: '.x-on-download',
-            onUpgradeSection: '.x-on-upgrade'
-       },
+            onDownloadToggle : '.x-on-download',
+            onUpgradeSection : '.x-on-upgrade',
+            indicator        : '.x-indicator'
+        },
 
         events: {
             'click .x-save'        : '_save',
@@ -39,6 +40,8 @@ define([
         },
 
         _save: function () {
+            this.ui.indicator.show();
+
             var self = this;
             var promise = this.model.save();
 
@@ -47,10 +50,16 @@ define([
                     self.targetCollection.add(self.model, { merge: true });
                     vent.trigger(vent.Commands.CloseModalCommand);
                 });
+
+                promise.fail(function () {
+                    self.ui.indicator.hide();
+                });
             }
         },
 
         _saveAndAdd: function () {
+            this.ui.indicator.show();
+
             var self = this;
             var promise = this.model.save();
 
@@ -60,6 +69,10 @@ define([
 
                     require('Settings/Notifications/Add/NotificationSchemaModal').open(self.targetCollection);
                 });
+
+                promise.fail(function () {
+                    self.ui.indicator.hide();
+                });
             }
         },
 
@@ -83,7 +96,13 @@ define([
         },
 
         _test: function () {
-            this.model.test();
+            var self = this;
+
+            this.ui.indicator.show();
+
+            this.model.test().always(function () {
+                self.ui.indicator.hide();
+            });
         },
 
         _onDownloadChanged: function () {

src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html

@@ -94,6 +94,7 @@
                 <button class="btn pull-left x-back">back</button>
             {{/if}}
 
+            <span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
             <button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
             <button class="btn x-cancel" data-dismiss="modal">cancel</button>
 

src/UI/Settings/ProviderSettingsModelBase.js

@@ -31,6 +31,8 @@ define([
             promise.fail(function (response) {
                 self.trigger('validation:failed', response);
             });
+
+            return promise;
         }
     });
 });

src/UI/Settings/settings.less

@@ -118,3 +118,8 @@ li.save-and-add:hover {
     }
   }
 }
+
+.indicator {
+  display       : none;
+  padding-right : 5px;
+}