Improved settings dialog behaviour

* Show when settings are saving
  * Show when settings are being retrieved
  * Disable Send/Cancel buttons while settings are saving
  * Prevent concurrent retrieval

src/octoprint/static/js/app/viewmodels/settings.js

@@ -6,6 +6,10 @@ $(function() {
         self.users = parameters[1];
         self.printerProfiles = parameters[2];
 
+        self.receiving = ko.observable(false);
+        self.sending = ko.observable(false);
+        self.callbacks = [];
+
         self.api_enabled = ko.observable(undefined);
         self.api_key = ko.observable(undefined);
         self.api_allowCrossOrigin = ko.observable(undefined);
@@ -261,13 +265,37 @@ $(function() {
         };
 
         self.requestData = function(callback) {
+            if (self.receiving()) {
+                if (callback) {
+                    self.callbacks.push(callback);
+                }
+                return;
+            }
+
+            self.receiving(true);
             $.ajax({
                 url: API_BASEURL + "settings",
                 type: "GET",
                 dataType: "json",
                 success: function(response) {
-                    self.fromResponse(response);
+                    var callbacks = self.callbacks;
-                    if (callback) callback();
+                    self.callbacks = [];
+
+                    if (callback) {
+                        callbacks.push(callback);
+                    }
+
+                    try {
+                        self.fromResponse(response);
+                        _.each(callbacks, function(cb) {
+                            cb();
+                        });
+                    } finally {
+                        self.receiving(false);
+                    }
+                },
+                error: function(xhr) {
+                    self.receiving(false);
                 }
             });
         };
@@ -429,6 +457,8 @@ $(function() {
             self.settingsDialog.trigger("beforeSave");
 
             if (data == undefined) {
+                // we only set sending to true when we didn't include data
+                self.sending(true);
                 data = ko.mapping.toJS(self.settings);
 
                 data = _.extend(data, {
@@ -525,11 +555,24 @@ $(function() {
                 contentType: "application/json; charset=UTF-8",
                 data: JSON.stringify(data),
                 success: function(response) {
-                    self.fromResponse(response);
+                    self.receiving(true);
-                    if (successCallback) successCallback(response);
+                    self.sending(false);
+                    try {
+                        self.fromResponse(response);
+                        if (successCallback) successCallback(response);
+                    } finally {
+                        self.receiving(false);
+                    }
+                },
+                error: function(xhr) {
+                    self.sending(false);
                 }
             });
         };
+
+        self.onEventSettingsUpdated = function() {
+            self.requestData();
+        };
     }
 
     OCTOPRINT_VIEWMODELS.push([

src/octoprint/templates/dialogs/settings.jinja2

@@ -1,7 +1,7 @@
 <div id="settings_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
-        <h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }}</h3>
+        <h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }} <i class="icon-spinner icon-spin" data-bind="visible: receiving"></i></h3>
     </div>
     <div class="modal-body">
         <div class="full-sized-box">
@@ -49,6 +49,6 @@
     </div>
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</button>
-        <button class="btn btn-primary" data-bind="click: function() { saveData(undefined, $root.hide) }">{{ _('Save') }}</button>
+        <button class="btn btn-primary" data-bind="click: function() { saveData(undefined, $root.hide) }, enable: !sending(), css: {disabled: sending()}"><i class="icon-spinner icon-spin" data-bind="visible: sending"></i> {{ _('Save') }}</button>
     </div>
 </div>