I currently have an ion-refresher implemented on 5 different pages within my application
<ion-refresher slot="fixed" (ionRefresh)="refreshActions($event)">
<ion-refresher-content pulling-icon="null" refreshing-spinner="null">
<ion-spinner name="crescent"></ion-spinner>
</ion-refresher-content>
</ion-refresher>
Upon pulling down this refresh, it triggers the following method
refreshActions($event) {
this.subscription$.forEach(subscription => subscription.unsubscribe());
this.loadFavoritesAssets(this.userId);
setTimeout(() => {
$event.target.complete();
}, 500);
}
This method unsubscribes from all subscriptions and reloads the HTTP Request to fetch new data from the database, which functions correctly
However, upon navigating to another page and attempting to use a different ion-refresher, the refresh action fails to trigger as intended. It seems to be hindered by the previous page's refresher.
As a workaround, returning to the previous page, scrolling the screen, or performing some other action is necessary to "complete" the existing refresh before being able to successfully refresh the new page.
Does anyone have insights into what causes this behavior? Could it be related to the way the complete() method is being called after an HTTP request refresh?
Addtionally, if I try to quickly navigate away from a refreshed page to another page, this problem consistently occurs