Image flickering when I auto-refresh the component

[Thotashivakumar]

Hi everyone

For my app requires auto-refresh for every 5 sec. I have implemented in Ionic with angular. Initial page is loading the image URL ,but when I refresh the page automatically ,image is loading but it is flickering and again it is flickering after 5 sec and it is repeating for every 5 sec. but in android it is working fine flickering is not happening for every 5 sec image is replacing with new image or existing image without flickering. but for IOS only when I’m trying to refresh it is flickering.

example code:
1. Html file: tab1.page.html

<ion-grid class="dashgrid" *ngIf="roomApp != 0">

  <div class="col-12">

    <div class="row">

      <div *ngFor="let item of roomApp">

        <div class="box" style="width:155px;" [ngClass]="{

              'redBorder':item.current_status == 0,

              'greenBorder':item.current_status == 1,

              'amberBorder':item.current_status == 2

            }">

          <div class="text-right">

            <ion-icon (click)="editName(item.id,item.custom_appliance_name);" name="create"></ion-icon>

          </div>

          <p *ngIf="!item.custom_appliance_name" class='data font12 hometitle'>{{item.appliance_name}}</p>

          <p *ngIf="item.custom_appliance_name" class='data font12 hometitle'>{{item.custom_appliance_name}}</p>

          <img src="{{item.off_icon}}" *ngIf="item.current_status == 0" alt="" class="cardimg" />

          <img src="{{item.on_icon}}" *ngIf="item.current_status == 1" alt="" class="cardimg" />

          <img src="{{item.off_icon}}" *ngIf="item.current_status == 2" alt="" class="cardimg" />

          <div class="d-flex justify-content-between">

            <div *ngIf="item.current_status == 1 || item.current_status == 0">

              <ion-toggle color="primary" style="padding-bottom: 4px;"

                (click)="checkStatus(item.id,item.current_status)"

                [checked]="item.current_status == 1 ? 'true' : 'false'"></ion-toggle>

              <div *ngIf="item.current_status == 1" class="font10">On</div>

              <div *ngIf="item.current_status == 0" class="font10">Off</div>

            </div>

            <div *ngIf="item.current_status == 2" class="d-flex align-items-center">

              <div *ngIf="item.current_status == 2" class="font10 p-2"

                style="background-color:red; color:#fff;border-radius:6px;">FAULTY</div>

            </div>

            <div>

              <ion-toggle class="custom-toggle" (click)="checkNotification(item.id,item.notification_status)"

                [checked]="item.notification_status == 1 ? 'true' : 'false'" style="padding-bottom: 4px;">

              </ion-toggle>

              <div class="font10">Notification</div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</ion-grid>

<ion-grid *ngIf="roomApp== 0" class="d-flex justify-content-center align-items-center red">

  No Appliances found

</ion-grid>

2. TS file: tab1.page.ts

doRefresh() {
this.apiService.rooms(this.uid).subscribe(response => {
if (!response[‘error’]) {
localStorage.setItem(“appliances”, JSON.stringify(response[‘appliances’]));
this.allAppliance = response[‘appliances’];
this.roomApp = this.allAppliance[this.room_id];
}
else {
this.resError = response[‘error’];
}
},
(err) => {
console.log("error==> ", err);
if (err[‘status’] == 401) {
this.navController.navigateForward(’/login’);
localStorage.setItem(‘loginValue’, ‘logout’);
}
})
}

3. scss file: tab1.page.scss
ion-content ion-toolbar {
–background: transparent;
}
.box {
box-shadow: 0 2px 4px rgba(var(–ion-color-dark-rgb), 0.24);
margin: 10px;
text-align: center;
padding: 6px;
min-height: 190px;
}
.cardimg {
width: 84px;
height: 84px;
}
.data {
margin: 0;
}
.font12{
font-size:12px;
}
.font10{
font-size:10px;
}
.red{
color:gray;
height: 100vh;
}
.greenBorder{
border-bottom:4px solid green;
}
.redBorder{
border-bottom:4px solid gray;
}
.amberBorder{
border-bottom:4px solid red;
}
.loading{
background-color:transparent !important;
}

---

In Android it is working fine without flickering below you can see Gif.

In IOS it is not working ,it is flickering

As you can see from IOS gif ,images are flickering.

can anyone help me from this issue