Angular 18.2.2 @If(){} and Angular material problem

Hi i have a angular material table

<div class="background">
@if (!this.isLoading) {
<table mat-table [dataSource]="tabelData" matSort class="mat-elevation-z8">
..rest of the table
</table>
}@else {
<div class="spinnerContainer">
<mat-spinner></mat-spinner>
</div>
}


but when i try to delay the download of the data to it

ngOnInit() {
this.fetchTableDataService.getTableElements().subscribe({
next: (data) => {
// Set loading state if needed
setTimeout(() => {
this.tabelData.data = [...data];
this.tabelData.sort = this.sort;
}, 1000); // Delay data assignment
},
}


it still gets the data when my page loads and whats weird i get at the begging i get and the table, mat spinner disapeers after 1 second

I think i should also specify that i turned on SSR when creating the project

I tried to delay download form my service Like this

return this.httpClient.get<PeriodicElement[]>(url).pipe(
delay(1000) // Directly apply delay to the observable
);



and like this

return from(data).pipe(
concatMap(item => of(item).pipe(delay(1000)))
);


but it did not work i also tried to use *ngIf in table but the same thing happens as when using @if

Continue reading...