Witam.
Mam tabele z towarami. Jest ich ponad 12k. Próbuje zrobić progress bar, który będzie sygnalizował, że dane są ładowane. Problem polega na tym, że to co mam zrobione pokazuje progress bar tylko na chwilę, później się zacina, stoi w połowie i znika jak już tabela jest wygenerowana.
Domyślam się, że to co mam zrobione tyczy się pobierania danych z API, a nie samego renderowania tabeli, dlatego progress bar się zacina w połowie animacji.
isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
isZerowe: boolean = false;
ngOnInit() {
this.isLoading$.next(true);
this.globals.updateGlobalKontrahent(null);
this.api.GetTowary(this.isZerowe).subscribe((result: any[]) => {
this.towary = result;
}, (error) => { console.log(error) }, () => {
this.isLoading$.next(false);
});
}
<div *ngIf="isLoading$ | async" class="progress active">
<div class="progress-bar indeterminate progress-bar-danger" role="progressbar" style="width:50%; height:4px;"></div>
</div>
<div *ngIf="!(isLoading$ | async)" class="table-responsive row">
<table class="table table-bordered table-head-purple table-hover table-striped" width="100%" id="towaryTable">
<thead class="thead-default thead-lg">
<tr>
<th>#</th>
<th>Kod</th>
<th>Nazwa</th>
<th>Typ</th>
<th>EAN</th>
<th>Numer katalogowy</th>
<th>JM</th>
<th>Ilość</th>
<th>Cena</th>
<th>CenaPLN</th>
</tr>
</thead>
<tbody>
<tr (dblclick)="route.navigate(['/towar/edit/', t.ID])" *ngFor="let t of towary; let i = index">
<td>{{i + 1}}</td>
<td>{{ t.Kod }}</td>
<td>{{ t.Nazwa }}</td>
<td>{{ t.Typ }}</td>
<td>{{ t.EAN }}</td>
<td>{{ t.NumerKatalogowy }}</td>
<td>{{ t.JM }}</td>
<td>{{ t.Ilosc }}</td>
<td>{{ t.Wartosc | currency:' ':'code' }}</td>
<td>{{ t.WartoscPLN | currency:' ':'code' }}</td>
</tr>
</tbody>
</table>
</div>
Da się wyłapać moment, w którym tabela jest już wyrenderowana?