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

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() {
    // Router events - spinner'ı navigation event'lere göre yönet
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.loading = true;
      } else if (
        event instanceof NavigationEnd ||
        event instanceof NavigationCancel ||
        event instanceof NavigationError
      ) {
        // Navigation tamamlandığında spinner'ı kapat
        setTimeout(() => {
          this.loading = false;
          
          // Initial loader'ı kaldır (varsa)
          const initialLoader = document.querySelector('.initial-loader');
          if (initialLoader) {
            initialLoader.remove();
          }
        }, 300);
      }
    });
  }
}