From f8a3d9a4ee1faa279c1944213c2c12e647f5a6f4 Mon Sep 17 00:00:00 2001
From: ozermzn <ozer.ramazan@outlook.com.tr>
Date: Tue, 3 Jan 2023 00:14:47 +0300
Subject: [PATCH] * abp-loading-directive added to button with other styles.

---
 .../dev-app/src/app/home/home.component.html     | 13 ++++---------
 .../apps/dev-app/src/app/home/home.component.ts  | 16 ++++++++++++----
 .../apps/dev-app/src/app/home/home.module.ts     |  3 ++-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 1302cfa018..70e342698c 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -12,19 +12,14 @@
 
     <button
       *ngIf="!hasLoggedIn"
-      [disabled]="isLog"
       (click)="login()"
+      [disabled]="isLog"
       class="px-4 btn btn-primary ml-1"
       role="button"
     >
-      <i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}
-      <div
-        *ngIf="isLog"
-        style="width: 17px; height: 17px"
-        class="spinner-border text-light ms-2"
-        role="status"
-      >
-        <span class="visually-hidden">Loading...</span>
+      <div class="d-flex">
+        <div><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</div>
+        <div [abpLoading]="isLog" class="" style="margin-bottom: 13px; margin-left: 7px"></div>
       </div>
     </button>
   </div>
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
index c2df395a0e..42956fb55c 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
@@ -1,24 +1,32 @@
 import { AuthService } from '@abp/ng.core';
 import { Component } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
-import { timeInterval } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
 export class HomeComponent {
+  //for disabled button and abp loading spinner
   isLog: boolean = false;
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
 
-  constructor(private authService: AuthService) {}
+  constructor(private authService: AuthService, private router: Router) {
+    // this.router.events.subscribe(event => {
+    //   if (event instanceof NavigationStart) {
+    //     console.log(event);
+    //   }
+    // });
+  }
 
   login() {
+    //when clicked button spinner and disabled will be active
     this.isLog = true;
-    setTimeout(data => {
+    setTimeout(a => {
       this.authService.navigateToLogin();
+      //all functions is over here
       this.isLog = false;
     }, 1000);
   }
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts
index 72d20ccc65..18416a991c 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.module.ts
@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
+import { LoadingDirective, ThemeSharedModule } from '@abp/ng.theme.shared';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [SharedModule, HomeRoutingModule],
+  imports: [SharedModule, HomeRoutingModule, ThemeSharedModule],
 })
 export class HomeModule {}