Ionic-framework: bug: ion-refresher not working when using skeleton

[luis-don-dev]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
When show content and hide skeleton and vice versa switching between tabs refresher stops working

Expected behavior:
Switch between tabs and use the refresher normally without it stop working

Steps to reproduce:

1. Create new app with tabs boilerplate
2. Put refresher, skeleton div and content div in each tab
3. Set boolean flag to control if skeleton shows of content

Related code:
In each tab ion-content I have the following code:

 <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
      <ion-refresher-content></ion-refresher-content>
 </ion-refresher>

 <div *ngIf="loading">
      <ion-list class="skeleton-list">
           <ion-item *ngFor="let index of [1,2,3,4,5,6,7,8,9,10]">
                <ion-label>
                     <h3>
                          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
                     </h3>
                     <p>
                          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
                     </p>
                     <p>
                          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
                     </p>
                </ion-label>
           </ion-item>
      </ion-list>
 </div>


 <div *ngIf="!loading">
      <ion-card class="welcome-card">
           <ion-img src="/assets/shapes.svg"></ion-img>
                <ion-card-header>
                     <ion-card-subtitle>Get Started</ion-card-subtitle>
                     <ion-card-title>Welcome to Ionic</ion-card-title>
                </ion-card-header>
           <ion-card-content>
                <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
           </ion-card-content>
      </ion-card>
 </div>

And in each tab Typescript file I have the following code:

 public loading = false;

 refresh(event) {
      this.loading = true;
      setTimeout(() => {
           this.loading = false;
           event.target.complete();
      }, 200);
 }

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[maxtacco]

We experiencing the same issue. This may be a duplicate of https://github.com/ionic-team/ionic/issues/16886

[luis-don-dev]

@maxtacco even if I put style="z-index: 0;" to ion-content it doesn't work, did that work for you?

[maxtacco]

@luis-don-dev No, I've tried it as well with no luck.

[luis-don-dev]

I was working on my real project facing the same issue then I create a default tabs boilerplate project to make that simple test just to find it doesn't work, I thought it was an issue with my code, hope it gets fixed soon :/

[vannatter]

Yep, same issue.

[roxteddy]

I think first tab where you used refresher keeps i don't know what, even when it is hidden.
If you delete the tab in the inspector, the refresher begin to work on another tab.

I wish there were a tab mode without any caching system. Guess I'm just gonna implement a standard router outlet instead.

[roxteddy]

I found a (nasty?) work-around :

pageIsActivated: boolean;

ionViewDidEnter() {
    this.pageIsActivated = true;
}

ionViewWillLeave() {
    this.pageIsActivated = false
}

<ion-content *ngIf="pageisActivated">
...
</ion-content>

This way, unused ion-refresher don't persist on the DOM.

[maxtacco]

@roxteddy's solution seems to work for me as well but official fix is really required

[roxteddy]

@maxtacco I agree with that. Actually, I discovered it does not work so good for me because there are cases where lifecycle events are not triggered properly.

[buuug7]

I solve this problem by add the following code snippet in the component/page that used ion-refresher. For example, if you have two page use ion-refresh, you need add the following code in each of page.

 // ---

   @ViewChild(IonRefresher, { static: false})
   refresher: IonRefresher;

   ionViewDidEnter() {
      this.refresher.disabled = false;
   }

   ionViewWillLeave() {
      this.refresher.disabled = true;
   }

  // ---

@IonicProSupport

[andreas-aeschlimann]

And what if the refresher sits in a modal? Then you probably cannot use the ionViewWillLeave...

[andreas-aeschlimann]

I was wondering: Is this a bug or is this expected (then it should be in the docs)?

Obviously, ion-refresher starts acting weird as soon as you have two of them in the DOM (as in pages with tabs).

[moritzvieli]

@buuug7 Thanks a lot! I also have multiple refreshers in tab pages and your workaround did the trick! 👍

[andreas-aeschlimann]

@moritzvieli according to the devs there should be a release soon with a complete reimplementation of the component.

[andreas-aeschlimann]

Has this been fixed in Ionic 4 or 5?

[davequested]

We're seeing an issue with this too. If the app is closed, then we get a push notification, click the push notification to open the app, the refresher pull down loads the data, but doesn't display it. Seems to be related to this issue.

[raghav14]

I'd tabs in which I was using the ion-refresher. @buuug7 thanks for the solution. It works smoothly