Hi
i set up infinite scroll in a projet using Angular 15 and ionic6.
I have an issue on ios (not appears on Android) : scrolling very fast on
a list of items, some part of the list is not displayed (blanck part randomly) on the dom , but data re-appears once i made a small scroll up or down. It seems to be a screen refresh problem
here is an example of the display :
my infinite-scroll implementation (at the end-part of my code) :
...
<app-session-item-schedule
[hasFavoriteStar]="true"
[session]="OneSession"
link="/app/tabs/programme/session/{{(dayIndex < 999) ? dayIndex : sessionHalfDay.dayIndex }}/{{OneSession.idSession}}"
[linkQueryParams]="{routeBack: '/app/tabs/programme'}"
[listFavorites]="listFavorites"
[sessionsToShow]="sessionsToShow"
[indexSessionToShow]="indexSessionToShow"
[indexSessionToShowSessions]="indexSessionToShowSessions">
</app-session-item-schedule>
</ion-item-sliding>
</ion-list>
</ion-col>
</ng-container>
</app-card-congress>
</ion-col>
<ion-infinite-scroll (ionInfinite)="loadData($event)" class="infinite">
<ion-infinite-scroll-content class="loading-spinner" loadingSpinner="bubbles"> </ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-row>
</ng-container>
</ion-grid>
</ion-content>
app-session-item-schedule , details :
<app-session-item-style></app-session-item-style>
<ng-template #labels>
<ion-label *ngIf="session" class="sessions-day__content" [ngStyle]="{ 'border-left-color': getSessionColor(session) }">
<h3 class="sessions-day__content__title">
<!-- <b *ngIf="session?.reference">{{session.reference}} - </b> --> <b class="congress">{{ session.title }}</b>
</h3>
<p *ngIf="showTracks && session?.tracks && session.tracks.length > 0" class="sessions-day__content__track">
<ion-chip class="sessions-day__content__track__chip" color="dark" outline>
<ion-label color="dark">
<ion-icon class="sessions-day__content__track__chip__icon" color="dark" [name]="getIcon().name" [src]="getIcon().src"> </ion-icon>
{{ getInlineTracks(session.tracks) }}
</ion-label>
</ion-chip>
</p>
<p *ngIf="session.ownRole" class="sessions-day__content__track">
<ion-chip class="ion-text-nowrap sessions-day__content__track__chip" color="dark" outline>
<ion-label color="dark">
<ion-icon class="sessions-day__content__track__chip__icon" color="dark" name="person"> </ion-icon>
{{ session.ownRole.name }}
</ion-label>
</ion-chip>
</p>
</ion-label>
</ng-template>
<ion-item
[attr.track]="session && session.topics ? encodeTrack(session.topics) : ''"
[detail]="!hasFavoriteStar && link"
class="ion-no-padding sessions-day"
[class]="{
'no-border': !realShowTime,
'do-i-appear': session.doIAppear,
'custom-border-radius': session.doIAppear,
'passed-session': isSessionPassed(session)
}"
>
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col
*ngIf="session && realShowTime"
size="2"
class="ion-text-center ion-align-items-center ion-justify-content-center sessions-day__time"
[class]="isSessionInProgress(session) ? 'isLive' : ''"
>
<ion-badge *ngIf="isSessionInProgress(session)" [color]="'danger'" class="live">
<div class="point"></div>
LIVE
</ion-badge>
<div class="sessions-day__time__label">
<ion-label *ngIf="session" color="dark"> {{ session.timeBegin }}<br />{{ session.timeEnd }} </ion-label>
<div *ngIf="session.tags?.length && session.tags.length > 0 && hasReplay(session.tags)">
<ion-button [id]="'click-trigger-' + session.idSession" fill="clear">
<ion-icon class="sessions-day__action__icon--black" color="dark" src="assets/icon/icon_replay.svg"> </ion-icon>
</ion-button>
<ion-popover [trigger]="'click-trigger-' + session.idSession" triggerAction="click">
<ng-template>
<ion-row class="ion-padding">{{ 'session.available-on-replay' | translate }}</ion-row>
</ng-template>
</ion-popover>
</div>
</div>
</ion-col>
<ion-col *ngIf="!link" [size]="realShowTime ? (hasFavoriteStar ? 8 : 10) : hasFavoriteStar ? 10 : 12">
<ng-container *ngTemplateOutlet="labels"></ng-container>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
my method loadData :
public loadData(e: Event): Promise<boolean> {
const event = e as InfiniteScrollCustomEvent;
return new Promise((resolve) => {
setTimeout(async () => {
const isResolve = await this.loadDataInner(this.sessionsToShowStorageIndex);
if (!isResolve) {
event.target?.complete();
resolve(false);
return;
}
this.sessionsToShowStorageIndex++;
if (this.sessionsToShowStorage[this.sessionsToShowStorageIndex]) {
this.sessionsToShowStorageInnerIndex[this.sessionsToShowStorageIndex] = this.sessionsToShowSize;
const group = cloneDeep(this.sessionsToShowStorage[this.sessionsToShowStorageIndex]);
group.sessions = group.sessions.slice(0, this.sessionsToShowSize);
this.sessionsToShow = [...this.sessionsToShow, group];
}
event.target?.complete();
if (this.sessionsToShowStorage.length - 1 <= this.sessionsToShowStorageIndex) {
if (event.target) {
event.target.disabled = true;
}
resolve(true);
} else {
resolve(false);
}
}, 0);
});
}
i don’t know if somebody already had this bug, on ios display.
thanks and have a nice day.
