I want to create a login form that slides back outside the screen when the user successfully logs in. The animation is based on an if statement that checks the authentication state. However, in order for this statement to work correctly, I have to use a $timeout to allow enough time for the login request to be sent and the authentication state to update before running the if statement.
Currently, the $timeout is set to 1000 ms which works fine as long as the request doesn't take longer than that. But sometimes, the request takes longer than expected. How can I adjust the duration dynamically based on the actual time taken by the request? I don't want to make the user wait unnecessarily if the request completes within 1000 ms.
The login process involves sending requests to Firebase API which results in inconsistent response times.
The animation is triggered from a directive that is activated by two separate buttons—one to display the login form and another to confirm the entered information:
forumApp.directive('mySigninSlide', ['sharedInfo', '$timeout',
function(sharedInfo, $timeout) {
return {
restrict: 'A',
link: function($scope, element, attrs) {
/**
* Display/hide the login form with animation
*/
element.on('click', function() {
var sidebar = $('#signin-wrapper');
if (element.attr('id') === 'confirm-login-btn') {
$timeout(function() {
if (sharedInfo.getAuthState()) {
sidebar.stop().animate({left: '-606px'});
sharedInfo.setError('');
$scope.isAnimated = true;
}
//1000 ms is the minimum required time for the login process
}, 1000);
}
else {
if ($scope.isAnimated === undefined ||
$scope.isAnimated === false) {
sidebar.stop().animate({left: '340px'});
$scope.isAnimated = true;
}
else {
sidebar.stop().animate({left: '-606px'});
$scope.isAnimated = false;
sharedInfo.setError('');
}
}
});
}
};
}]);