gui: Block GUI when saving changes only if necessary (ref #9063) (#9079)

Currently, the UI is always blocked from modifications when changes are
being saved, even if the save process takes very little time. This leads
to a situation where showing and closing the blocking modal can take
more time than is actually required to perform the whole operation. The
modal opening and closing very quickly can also cause the screen to
flash for a brief moment, leading to visual discomfort.

Because of this, wait for at least 200 ms and only show the blocking
modal if the changes have not been saved until then yet. The value of
200 ms is loosely based on [1] which states that 'a delay of 0.2–1.0
seconds does mean that users notice the delay and thus feel the computer
is "working" on the command, as opposed to having the command be a
direct effect of the users' actions.' Additionally, the delay must not
be too long, because the main purpose of the blocking modal is to
prevent the user from making further changes, and a longer delay would
possibly allow to do so in that brief amount of time as long as the user
is quick enough with their input.

[1] https://nngroup.com/articles/response-times-3-important-limits

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>

1 files changed, 7 insertions, 2 deletions

diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js
index 26e067a597..7c098aa619 100755
--- a/gui/default/syncthing/core/syncthingController.js
+++ b/gui/default/syncthing/core/syncthingController.js
@@ -1513,7 +1513,10 @@ angular.module('syncthing.core')
         };
 
         $scope.saveConfig = function () {
-            $('#savingChanges').modal();
+            // Only block the UI when there is a significant delay.
+            var timeout = setTimeout(function () {
+                $('#savingChanges').modal('show');
+            }, 200);
             var cfg = JSON.stringify($scope.config);
             var opts = {
                 headers: {
@@ -1521,8 +1524,10 @@ angular.module('syncthing.core')
                 }
             };
             return $http.put(urlbase + '/config', cfg, opts).finally(function () {
+                console.log('saveConfig', $scope.config);
                 refreshConfig();
-                $('#savingChanges').modal("hide");
+                clearTimeout(timeout);
+                $('#savingChanges').modal('hide');
             }).catch($scope.emitHTTPError);
         };