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

gui/default/assets/lang/lang-en.json

@@ -325,6 +325,7 @@
     "Revert": "Revert",
     "Revert Local Changes": "Revert Local Changes",
     "Save": "Save",
+    "Saving changes": "Saving changes",
     "Scan Time Remaining": "Scan Time Remaining",
     "Scanning": "Scanning",
     "See external versioning help for supported templated command line parameters.": "See external versioning help for supported templated command line parameters.",
@@ -391,6 +392,7 @@
     "Syncthing is listening on the following network addresses for connection attempts from other devices:": "Syncthing is listening on the following network addresses for connection attempts from other devices:",
     "Syncthing is not listening for connection attempts from other devices on any address.  Only outgoing connections from this device may work.": "Syncthing is not listening for connection attempts from other devices on any address.  Only outgoing connections from this device may work.",
     "Syncthing is restarting.": "Syncthing is restarting.",
+    "Syncthing is saving changes.": "Syncthing is saving changes.",
     "Syncthing is upgrading.": "Syncthing is upgrading.",
     "Syncthing now supports automatically reporting crashes to the developers. This feature is enabled by default.": "Syncthing now supports automatically reporting crashes to the developers. This feature is enabled by default.",
     "Syncthing seems to be down, or there is a problem with your Internet connection. Retrying…": "Syncthing seems to be down, or there is a problem with your Internet connection. Retrying…",

gui/default/index.html

@@ -978,6 +978,7 @@
   <ng-include src="'syncthing/core/restartingDialogView.html'"></ng-include>
   <ng-include src="'syncthing/core/upgradingDialogView.html'"></ng-include>
   <ng-include src="'syncthing/core/shutdownDialogView.html'"></ng-include>
+  <ng-include src="'syncthing/core/savingChangesDialogView.html'"></ng-include>
   <ng-include src="'syncthing/device/idqrModalView.html'"></ng-include>
   <ng-include src="'syncthing/device/editDeviceModalView.html'"></ng-include>
   <ng-include src="'syncthing/device/globalChangesModalView.html'"></ng-include>

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 () {