Ionic GUI freezes with click event - ionic-framework

Question

I'm having som issues with a button in my Ionic app. My button have a click event "loginEvent()" that performs a login for the user. I have two span tags that is supposed to display a loading symbol while the login is performed.
The problem is that the button is not updated with the loading symbol until the loginEvent() returns. The click animation on the button does also not run until the loginEvent() returns.
When the button is clicked both "login" and "/login" is printed before the button updates to a spinner, giving the impression that the GUI freezes. The desired behaviour is that the login-button get the spinner while the login call is being performed.
Any idea why my button behaves like this?
Login button
<button ion-button block (click)="loginEvent();">
<span *ngIf="!isLoading">Logga in</span>
<span *ngIf="isLoading"><ion-spinner></ion-spinner></span>
</button>
loginEvent()
loginEvent() {
console.log("login");
this.isLoading = true;
this.userHandler.login(this.username, this.password, this); //Performa authentication to Amazon Cognito and returns the result via callback function
console.log("/login");
}
EDIT
Adding the code for my UserHandler and AuthenticationService.
UserHandler.ts
#Injectable()
export class UserHandler {
constructor(public authenticationService: AuthenticationService) {
this.observers = new Array<Observer>();
}
public login(username: string, password: string, callback: any) {
this.authenticationService.performLogin(username, password, callback);
}
}
AuthenticationService.ts
public performLogin(username: string, password: string, callback: CognitoCallback) {
username = username .toLowerCase();
var authenticationData = {
Username: username,
Password: password,
};
var authenticationDetails = new AWSCognito.AuthenticationDetails(authenticationData);
var userData = {
Username: username,
Pool: this.getUserPool()
};
let cognitoUser = new AWSCognito.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result: any) {
var loginKey = 'cognito-idp.' + environment.region + '.amazonaws.com/' + environment.userPoolId;
var loginProvider = {};
loginProvider[loginKey] = result.getIdToken().getJwtToken();
var credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: environment.identityPoolId,
Logins: loginProvider
});
credentials.refresh((error: any) => {
if (error) {
console.error(error);
}
});
credentials.get(function (err: any) {
if (!err) {
callback.cognitoCallback(null, result, "FAILED");
} else {
callback.cognitoCallback(err.message, null, "SUCCESS");
}
});
},
onFailure: function (err: any) {
callback.cognitoCallback(err.message, null, "FAILURE");
},
newPasswordRequired: function (userAttributes: any, requiredAttributes: any) {
callback.cognitoCallback("Please set a new password", null, "newPasswordRequired");
}
});
}

Answer 1

I guess 'userHandler.login' is used to call the API for user authentication. As the HTTP requests are asynchronous it returns promise immediately you call them.
Instead of the spinner, you can use ionic loading component, where you can show the loader until the API returns the response.
Please share your userHandler code.