fix: add loading spinner when login / logout still undefined

danieljancar · Aug 11, 2024 · 0f1e0cb · 0f1e0cb
1 parent 1114749
commit 0f1e0cb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/apps/frontend/src/app/core/auth.service.ts b/apps/frontend/src/app/core/auth.service.ts
@@ -11,7 +11,7 @@ import { Router } from '@angular/router'
 })
 export class AuthService {
   private server = new Horizon.Server('https://horizon-testnet.stellar.org')
-  public loginStatusChanged = new EventEmitter<boolean>() // Emit login status changes
+  public loginStatusChanged = new EventEmitter<boolean>()
 
   constructor(
     private http: HttpClient,
@@ -72,7 +72,7 @@ export class AuthService {
         await this.server.accounts().accountId(publicKey).call()
         this.cookieService.set('privateKey', privateKey)
         this.cookieService.set('publicKey', publicKey)
-        this.loginStatusChanged.emit(true) // Notify login status change
+        this.loginStatusChanged.emit(true)
         return true
       } catch (error) {
         console.error('Account does not exist or cannot be retrieved:', error)
@@ -104,7 +104,7 @@ export class AuthService {
   async logout(): Promise<void> {
     this.cookieService.delete('privateKey')
     this.cookieService.delete('publicKey')
-    this.loginStatusChanged.emit(false) // Notify logout status change
+    this.loginStatusChanged.emit(false)
     await this.router.navigate(['/login'])
   }
 

diff --git a/apps/frontend/src/app/shared/navigation/navbar/navbar.component.html b/apps/frontend/src/app/shared/navigation/navbar/navbar.component.html
@@ -51,7 +51,11 @@
         >About</a
       >
     </div>
-    @if (!isLoggedIn) {
+    @if (isLoggedIn === undefined){
+    <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+      <app-loading />
+    </div>
+    } @else if (!isLoggedIn) {
     <div class="hidden lg:flex lg:flex-1 lg:justify-end">
       <a
         class="text-sm font-semibold leading-6 text-gray-900 focus:ring-2 focus:ring-gray-500"

diff --git a/apps/frontend/src/app/shared/navigation/navbar/navbar.component.ts b/apps/frontend/src/app/shared/navigation/navbar/navbar.component.ts
@@ -2,17 +2,18 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
 import { AuthService } from '../../../core/auth.service'
 import { Subscription } from 'rxjs'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
+import { LoadingComponent } from '../../feedback/loading/loading.component'
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [CommonModule, NgOptimizedImage],
+  imports: [CommonModule, NgOptimizedImage, LoadingComponent],
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit, OnDestroy {
   isMenuOpen = false
-  isLoggedIn = false
+  isLoggedIn: boolean | undefined
   private subscription: Subscription = new Subscription()
 
   constructor(private authService: AuthService) {}