feat(ui): add login loader

Author: DlieBG

ui/src/app/components/login/login.component.html

@@ -51,8 +51,14 @@ <h2>
                 <mat-icon matSuffix>123</mat-icon>
             </mat-form-field>
 
-            <fle-button class="button" mode="primary" appearance="flat" label="Speichern" leftIconName="heroLockClosed"
-                type="button" (handleClick)="save()"></fle-button>
+            <div class="login-buttons" [hidden]="loading">
+                <fle-button class="button" mode="primary" appearance="flat" label="Speichern"
+                    leftIconName="heroLockClosed" type="button" (handleClick)="save()"></fle-button>
+            </div>
+
+            <div class="login-loader" *ngIf="loading">
+                <mat-spinner color="accent" diameter="48"></mat-spinner>
+            </div>
         </div>
     </div>
 </div>

ui/src/app/components/login/login.component.scss

@@ -39,4 +39,15 @@ a {
 
 mat-form-field {
     width: 100%;
+}
+
+.login-loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-buttons,
+.login-loader {
+    height: 48;
 }

ui/src/app/components/login/login.component.ts

@@ -14,6 +14,8 @@ export class LoginComponent implements OnInit {
 
   credentials!: Credentials;
 
+  loading: boolean = false;
+
   constructor(
     private snackbar: MatSnackBar,
     private router: Router,
@@ -26,6 +28,8 @@ export class LoginComponent implements OnInit {
   }
 
   save() {
+    this.loading = true;
+
     this.atossService
       .getBalance({
         personal_number: this.credentials.personal_number,
@@ -44,6 +48,8 @@ export class LoginComponent implements OnInit {
           );
 
           this.router.navigate(['/']);
+
+          this.loading = false;
         },
         error: () => {
           this.snackbar.open(
@@ -53,6 +59,8 @@ export class LoginComponent implements OnInit {
               duration: 4000,
             }
           );
+
+          this.loading = false;
         }
       });
   }