Within the main component, I have an
@Input() alkatreszList$!: Observable<any[]>;@Input() item: any; using the item object:
<div class="container-fluid">
<div class="row mb-3">
<ng-container *ngFor="let item of filteredAlkatreszek; trackBy: trackByItemId">
<div class="column">
<app-carousel [item]="item"></app-carousel>
</div>
</ng-container>
</div>
</div>
In the child component, there is a carousel within a container.
<ng-container *ngIf="img.trim() !== ''">
<img [defaultImage]="'https://localhost:7094/images/placeholder.png'"
[lazyLoad]="'https://localhost:7094/images/' + img" style="height: 250px"
[debug]="true"
(onStateChange)="lazyLoadSpinner(i, $event)"
(click)="selectItem(item)"/>
<div class="progress-container" [ngClass]="{ 'd-none': isItemLoaded(i) }">
<div class="spinner-overlay"></div>
<div class="spinner-container">
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</ng-container>
These variables are utilized in various functions:
activeIndexModal = 0;
activeIndexCarousel = 0;
loadedCounts: number[] = [];
lazyLoadSpinner(index: number, event: StateChange) {
if (!this.loadedCounts[index]) {
this.loadedCounts[index] = 0;
}
switch (event.reason) {
case 'start-loading':
if (this.loadedCounts[index] === 0) {
// Start loading for a new item
this.loadedCounts[index] = -1;
}
break;
case 'loading-succeeded':
this.loadedCounts[index]++;
if (this.loadedCounts[index] >= this.item.kepek.split(';').length) {
this.loadedCounts[index] = 0;
}
break;
}
}
isItemLoaded(index: number): boolean {
console.log("isItemLoaded() called");
return this.loadedCounts[index] === 0;
}
The issue with the spinners persists where, irrespective of whether OnPush or Default change detection strategy is used in the child component, interaction with carousels or other elements on the site is necessary for the spinners to disappear after isItemLoaded() returns true. Suggestions for a better design approach or identifying issues in the code would be appreciated.
Here are the CSS rules and remaining template code for the child component:
.carousel-item {
height: 400px !important;
width: 100% !important;
margin-bottom: var(--bs-gutter) !important;
}
.carousel-item.reactive img {
object-fit: cover !important;
height: 100% !important;
width: 100% !important;
transition: transform 0.2s;
}
/* Additional CSS rules continue ... */