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

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:

Create new app with tabs boilerplate
Put refresher, skeleton div and content div in each tab
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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 19 (1 by maintainers)

Most upvoted comments

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

+11

buuug7 on Sep 20, 2019

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

andreas-aeschlimann on Dec 19, 2019

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.

roxteddy on Jun 25, 2019