Added loaders for better UX

src/app/forgot-password/forgot-password.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../services/auth.service';
 import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
     selector: 'app-forgot-password',
@@ -13,35 +14,55 @@ export class ForgotPasswordPage implements OnInit {
     otp: string | number = '';
     newPassword: string = '';
 
+    loader: any;
+
     stepType: 'EMAIL' | 'OTP' | 'RESET' = 'EMAIL';
 
     constructor(
         private authService: AuthService,
         private toastService: ToastService,
-        private router: Router
+        private router: Router,
+        public loadingController: LoadingController
     ) { }
 
     ngOnInit() {
     }
 
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+          message: 'Please wait...',
+          spinner: 'dots',
+          mode: 'ios'
+        });
+        await this.loader.present();
+    }
+
     ionViewDidEnter() {
         document.querySelector('.menu-icon-holder').classList.add('hide');
     }
 
     getOtp() {
+        this.presentLoading();
+        
         this.authService.forgotPassword(this.email).then(() => {
+            this.loader.dismiss();
             this.toastService.presentToast("OTP Sent to your Email ID", "success");
             this.stepType = 'OTP';
         }, () => {
+            this.loader.dismiss();
             this.toastService.presentToast("Failed to send OTP, Please check your credentials", "danger");
         });
     }
 
     verifyOtp() {
+        this.presentLoading();
+        
         this.authService.validateOtpForForgotPassword({ email: this.email, otp: this.otp }).then(() => {
             this.toastService.presentToast("Verified", "success");
             this.stepType = 'RESET';
+            this.loader.dismiss();
         }, () => {
+            this.loader.dismiss();
             this.toastService.presentToast("Verification failed, please try again", "danger");
         });
     }
@@ -54,11 +75,15 @@ export class ForgotPasswordPage implements OnInit {
             reEnteredPassword: this.newPassword
         };
 
+        this.presentLoading();
+
         this.authService.resetPasswordForEmail(credentials).then(() => {
+            this.loader.dismiss();
             this.toastService.presentToast("Password Reset Complete", "success");
             this.router.navigate(['/login']);
             this.stepType = 'EMAIL';
         }, () => {
+            this.loader.dismiss();
             this.toastService.presentToast("Please check your password", "danger");
         });
     }

src/app/login/login.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
 import { ToastService } from '../services/toast.service';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
     selector: 'app-login',
@@ -17,16 +18,28 @@ export class LoginPage implements OnInit {
 
     show_password = false;
 
+    loader: any;
+
     constructor(
         private router: Router,
         private authService: AuthService,
-        public toastService: ToastService
+        public toastService: ToastService,
+        public loadingController: LoadingController
     ) { }
 
     ionViewDidEnter() {
         document.querySelector('.menu-icon-holder').classList.add('hide');
     }
 
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+          message: 'Please wait...',
+          spinner: 'dots',
+          mode: 'ios'
+        });
+        await this.loader.present();
+    }
+
     ngOnInit() {
     }
 
@@ -35,13 +48,19 @@ export class LoginPage implements OnInit {
     }
 
     login() {
+        this.presentLoading();
+        
         this.authService.authenticateUser(this.credentials).then((data: any) => {
             localStorage.userInfo = JSON.stringify(data);
             localStorage.access_Token = data.access_Token;
+
+            this.loader.dismiss();
+
             this.router.navigate(['/malls']);
             document.querySelector('.menu-icon-holder').classList.remove('hide');
         }, (err) => {
-            console.log(err);
+            this.loader.dismiss();
+
             this.toastService.presentToast('Please check your credentials', 'danger');
         })
     }

src/app/malls/malls.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild,ElementRef } from '@angular/core';
 import { MallService } from '../services/mall.service';
 import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
     selector: 'app-malls',
@@ -18,13 +19,23 @@ export class MallsPage implements OnInit {
     selected_sort: string = null;
     searchTerm: string = '';
     selectedFoodType: string = '';
+    loader: any;
 
     constructor(
         private mallService: MallService,
         private router: Router,
-        private toastService: ToastService
+        private toastService: ToastService,
+        public loadingController: LoadingController
     ) { }
 
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+          message: 'Please wait...',
+          spinner: 'dots',
+          mode: 'ios'
+        });
+        await this.loader.present();
+    }
     
     getMallsByFoodType(type: string) {
         this.selectedFoodType = type;
@@ -103,16 +114,19 @@ export class MallsPage implements OnInit {
     getMallsByLocation() {
         if (navigator.geolocation) {
             this.toastService.presentToast("Getting malls based on your location...", "dark");
+            this.presentLoading();
             navigator.geolocation.getCurrentPosition((position) => {
                 this.mallService.mallsByLocation(position.coords.latitude, position.coords.longitude).then((response: any) => {
                     if (response.length > 0) {                        
                         this.allMalls = response;
                         this.tempMalls = response;
+                        this.loader.dismiss();
                     } else {
                         this.toastService.presentToast("No malls near you your location, Getting all the malls...", "warning");
                         this.getAllMalls();
                     }
                 }, () => {
+                    this.loader.dismiss();
                     this.toastService.presentToast("Failed to fetch malls for your location", "danger");
                 });
             });
@@ -125,7 +139,9 @@ export class MallsPage implements OnInit {
         this.mallService.allMalls().then((response) => {
             this.allMalls = response;
             this.tempMalls = response;
+            this.loader.dismiss();
         }, (error) => {
+            this.loader.dismiss();
             console.log(error);
         });
     }

src/app/onboarding/onboarding.page.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
 import { ToastService } from '../services/toast.service';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
     selector: 'app-onboarding',
@@ -27,11 +28,23 @@ export class OnboardingPage implements OnInit {
     has_special = false;
     otp: string = '';
 
+    loader: any;
+
     constructor(
         private router: Router,
         private authService: AuthService,
-        public toastService: ToastService
-    ) { }    
+        public toastService: ToastService,
+        public loadingController: LoadingController
+    ) { }
+
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+          message: 'Please wait...',
+          spinner: 'dots',
+          mode: 'ios'
+        });
+        await this.loader.present();
+    }
 
     ionViewDidEnter() {
         document.querySelector('.menu-icon-holder').classList.add('hide');
@@ -83,27 +96,35 @@ export class OnboardingPage implements OnInit {
     }
 
     validateUser() {
-        this.authService.validateOtpForEmail({ email: this.credentials.email, otp: this.otp }).then((data) => {
-            console.log(data);
+        this.presentLoading();
+
+        this.authService.validateOtpForEmail({ email: this.credentials.email, otp: this.otp }).then(() => {
+            this.loader.dismiss();
             this.toastService.presentToast("Verified!", "success");
             this.nextPage();
         }, (err) => {
+            this.loader.dismiss();
             console.log(err);
             this.toastService.presentToast("Failed to verify, try again", "danger");
         })
     }
 
     registerUser() {
-        this.authService.signupUser(this.credentials).then((data) => {
-            console.log(data);
+        this.presentLoading();
+
+        this.authService.signupUser(this.credentials).then(() => {
+            this.loader.dismiss();
             this.nextPage();
         }, (err) => {
             console.log(err);
+            this.loader.dismiss();
             this.toastService.presentToast("Failed to create user", "danger");
         });
     }
 
     autoLogin() {
+        this.presentLoading();
+
         this.authService.authenticateUser({ 
             username: this.credentials.username,
             password: this.credentials.password,
@@ -111,9 +132,13 @@ export class OnboardingPage implements OnInit {
         }).then((data: any) => {
             localStorage.userInfo = JSON.stringify(data);
             localStorage.access_Token = data.access_Token;
+
+            this.loader.dismiss();
+
             this.router.navigate(['/malls']);
             document.querySelector('.menu-icon-holder').classList.remove('hide');
         }, (err) => {
+            this.loader.dismiss();
             console.log(err);
             this.toastService.presentToast('Please check your credentials', 'danger');
         })

src/app/orders/orders.component.ts

@@ -4,6 +4,7 @@ import * as moment from 'moment';
 import { ICart } from '../cart/cart.page';
 import { Router } from '@angular/router';
 import { ToastService } from '../services/toast.service';
+import { LoadingController } from '@ionic/angular';
 
 @Component({
     selector: 'app-orders',
@@ -30,12 +31,24 @@ export class OrdersComponent implements OnInit {
         rating: null,
     };
 
+    loader: any;
+
     constructor(
         private orderService: OrderService,
         private router: Router,
-        private toastService: ToastService
+        private toastService: ToastService,
+        public loadingController: LoadingController
     ) { }
 
+    async presentLoading() {
+        this.loader = await this.loadingController.create({
+          message: 'Please wait...',
+          spinner: 'dots',
+          mode: 'ios'
+        });
+        await this.loader.present();
+    }
+
     submitFeedbackForOrder() {
         this.tempReview.app_user.user_id = this.userInfo.id;
         
@@ -64,16 +77,7 @@ export class OrdersComponent implements OnInit {
 
         }, () => {
             this.toastService.presentToast("Failed to send review", "danger");
-        });
-        
-        // this.selectedOrder = null;
-        // this.tempReview = {
-        //     app_user: {
-        //         user_id: null
-        //     },
-        //     comment: '',
-        //     rating: null,
-        // };
+        });        
     }
 
     getOrderInUsercardFormat(orderedlist: any) {
@@ -99,11 +103,17 @@ export class OrdersComponent implements OnInit {
     ngOnInit() {
         this.userInfo = JSON.parse(localStorage.userInfo)['User Info'];
 
+        this.presentLoading();
+
 		this.orderService.getOrders(this.userInfo.id).then((resp: any)=> {
-			this.userOrders = resp.reverse();
+            this.userOrders = resp.reverse();
+            
+            this.loader ? this.loader.dismiss() : null;
 		}, (err) => {
             console.log(err);
             this.toastService.presentToast("Failed to get orders");
+
+            this.loader ? this.loader.dismiss() : null;
         });
         
         this.orderService.getAllOrderStatus().then((data) => {