Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Building

App Files Community
1
flare
File size: 2,146 Bytes 
9f79da5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b93905
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
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);
      }
    });
  }
}