From dc4c02e0d712743fb3ed3e48cb2abe04ef4e71ae Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Thu, 9 Jan 2025 12:43:53 +0000
Subject: [PATCH] add animation to login

Reviewed-on: https://git.simonis.lol/angular/ems-frontend/pulls/28
Reviewed-by: Get in my car i have candy <huydw@proton.me>
---
 src/app/login/login.component.css  |  6 ++++++
 src/app/login/login.component.html |  2 +-
 src/app/login/login.component.ts   | 19 +++++++++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index e69de29..52267f3 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -0,0 +1,6 @@
+.dot-loader {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #555;
+  text-align: center;
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 147cfc4..5de9dba 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1 +1 @@
-<p>login works!</p>
+<div class="dot-loader">Logging in<span>{{ dots }}</span></div>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index b32d924..efa3330 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {interval, Subscription} from "rxjs";
 
 @Component({
   selector: 'app-login',
@@ -7,6 +8,20 @@ import { Component } from '@angular/core';
   standalone: true,
   styleUrl: './login.component.css'
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit, OnDestroy{
+  dots: string = '';
+  private maxDots: number = 4; // Maximum number of dots
+  private intervalSub!: Subscription;
 
+  ngOnInit(): void {
+    this.intervalSub = interval(500).subscribe(() => {
+      this.dots = this.dots.length < this.maxDots ? this.dots + '.' : '';
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.intervalSub) {
+      this.intervalSub.unsubscribe();
+    }
+  }
 }