feat: add loading spinner to login button for slow wifi feedback

apps/frontend/src/app/features/login/login.component.html

@@ -68,10 +68,12 @@
           [disabled]="loginForm.invalid"
           [ngClass]="{
             'bg-gray-700 hover:bg-gray-700': loginForm.invalid,
-            'bg-indigo-600 hover:bg-indigo-700': loginForm.valid
+            'bg-indigo-600 hover:bg-indigo-700': loginForm.valid,
           }"
         >
-          Log in
+          @if (isLoading){
+          <app-button-spinner />
+          }@else{ Log in }
         </button>
       </div>
     </form>

apps/frontend/src/app/features/login/login.component.ts

@@ -12,6 +12,7 @@ import { ErrorComponent } from '../../shared/feedback/error/error.component'
 import { LoadingComponent } from '../../shared/feedback/loading/loading.component'
 import { SuccessComponent } from '../../shared/feedback/success/success.component'
 import { RouterLink } from '@angular/router'
+import { ButtonSpinnerComponent } from '../../shared/feedback/button-spinner/button-spinner.component'
 
 @Component({
   selector: 'app-login',
@@ -25,6 +26,7 @@ import { RouterLink } from '@angular/router'
     LoadingComponent,
     SuccessComponent,
     RouterLink,
+    ButtonSpinnerComponent,
   ],
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
@@ -34,6 +36,7 @@ export class LoginComponent {
   protected hasError = false
   protected errorMessage = ''
   protected successMessage = ''
+  protected isLoading = false
 
   constructor(
     private authService: AuthService,
@@ -46,6 +49,7 @@ export class LoginComponent {
   }
 
   async logInUsingPrivateKey() {
+    this.isLoading = true
     const privateKey = this.loginForm.value.privateKey
     const couldLogin = await this.authService.loginUsingPrivateKey(privateKey)
 
@@ -59,6 +63,7 @@ export class LoginComponent {
         'Failed to login. Please check your private key or register a new account.'
       this.loginForm.reset()
     }
+    this.isLoading = false
   }
 
   errorAction = (): void => {

apps/frontend/src/app/shared/feedback/button-spinner/button-spinner.component.html

@@ -0,0 +1,20 @@
+<svg
+  class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <circle
+    class="opacity-25"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="4"
+  ></circle>
+  <path
+    class="opacity-75"
+    fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  ></path>
+</svg>

apps/frontend/src/app/shared/feedback/button-spinner/button-spinner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ButtonSpinnerComponent } from './button-spinner.component'
+
+describe('ButtonSpinnerComponent', () => {
+  let component: ButtonSpinnerComponent
+  let fixture: ComponentFixture<ButtonSpinnerComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonSpinnerComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ButtonSpinnerComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/frontend/src/app/shared/feedback/button-spinner/button-spinner.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-button-spinner',
+  standalone: true,
+  imports: [],
+  templateUrl: './button-spinner.component.html',
+  styleUrl: './button-spinner.component.css',
+})
+export class ButtonSpinnerComponent {}