Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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>
This commit is contained in:
tomasz1986 2023-09-12 15:02:37 +02:00 committed by GitHub
parent f47de83914
commit c9dfd75d8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gui/default/syncthing/core/syncthingController.js
View File

@ -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);
};