Untitled

import { Component, OnInit } from '@angular/core';
import { ServerService } from './service/service/server.service';
import { Observable, map, of, startWith, delay } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AppState } from './interface/app-state';
import { CustomResponse } from './interface/custom-response';
import { DataState } from './enum/data-state-enum';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  appState$!: Observable<AppState<CustomResponse>>;

  readonly DataState = DataState;

  constructor(private serverService: ServerService) {

  }

  ngOnInit(): void {
    this.appState$ = this.serverService.servers$
    .pipe(
      delay(10000),
      map(response => {
        return { dataState: DataState.LOADED_STATE, appData: response }
      }),
      startWith({ dataState: DataState.LOADING_STATE }),
      catchError((error:String) => {
        return of({ dataState: DataState.ERROR_STATE, error})
      })
    );

    // Debugging: Log emitted values to the console
    this.appState$.subscribe(appState => console.log('appState:', appState.dataState));
  }
}