From c9dfd75d8eb2d27a54e6b87fa9032611dc1c0ecb Mon Sep 17 00:00:00 2001 From: tomasz1986 Date: Tue, 12 Sep 2023 15:02:37 +0200 Subject: [PATCH] gui: Block GUI when saving changes only if necessary (ref #9063) (#9079) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- gui/default/syncthing/core/syncthingController.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js index 26e067a59..7c098aa61 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); };