gui: Prevent modifications when saving changes (fixes #9019) (#9063)

gui/default/syncthing/core/savingChangesDialogView.html

@@ -0,0 +1,8 @@
+<modal id="savingChanges" status="info" icon="fas fa-hourglass-half" heading="{{'Saving changes' | translate}}" large="no" closeable="no">
+  <div class="modal-body">
+    <p>
+      <span translate>Syncthing is saving changes.</span>
+      <span translate>Please wait</span>...
+    </p>
+  </div>
+</modal>

gui/default/syncthing/core/syncthingController.js

@@ -1513,13 +1513,17 @@ angular.module('syncthing.core')
         };
 
         $scope.saveConfig = function () {
+            $('#savingChanges').modal();
             var cfg = JSON.stringify($scope.config);
             var opts = {
                 headers: {
                     'Content-Type': 'application/json'
                 }
             };
-            return $http.put(urlbase + '/config', cfg, opts).finally(refreshConfig).catch($scope.emitHTTPError);
+            return $http.put(urlbase + '/config', cfg, opts).finally(function () {
+                refreshConfig();
+                $('#savingChanges').modal("hide");
+            }).catch($scope.emitHTTPError);
         };
 
         $scope.urVersions = function () {