Update flare-ui/src/app/app.component.ts

flare-ui/src/app/app.component.ts

@@ -1,21 +1,76 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [CommonModule, RouterOutlet],
-  template: `
-    <router-outlet></router-outlet>
-  `,
-  styles: [`
-    :host {
-      display: block;
-      height: 100vh;
-    }
-  `]
-})
-export class AppComponent {
-  title = 'Flare Administration';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RouterOutlet } from '@angular/router';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, MatProgressSpinnerModule],
+  template: `
+    <div class="app-container">
+      <!-- Global Loading Spinner -->
+      <div class="global-spinner" *ngIf="loading">
+        <mat-spinner diameter="60"></mat-spinner>
+        <p>Loading...</p>
+      </div>
+      
+      <!-- Main Content -->
+      <router-outlet></router-outlet>
+    </div>
+  `,
+  styles: [`
+    .app-container {
+      position: relative;
+      min-height: 100vh;
+    }
+    
+    .global-spinner {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    }
+    
+    .global-spinner p {
+      margin-top: 20px;
+      color: #666;
+      font-size: 16px;
+    }
+  `]
+})
+export class AppComponent implements OnInit {
+  loading = true;
+
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    // Initial loading
+    setTimeout(() => {
+      this.loading = false;
+    }, 100);
+
+    // Router events
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.loading = true;
+      } else if (
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel ||
+        event instanceof NavigationError
+      ) {
+        // Small delay to prevent flicker
+        setTimeout(() => {
+          this.loading = false;
+        }, 300);
+      }
+    });
+  }
 }