Image flickering when I auto-refresh the component ( Ionic angular ) - ionic-framework

Question

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;
}
Package.json
{
"name": "vidut",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#ionic-native/core": "^5.0.0",
"#ionic-native/device": "^5.24.0",
"#ionic-native/keyboard": "^5.25.0",
"#ionic-native/preview-any-file": "^5.30.0",
"#ionic-native/screen-orientation": "^5.26.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.0.0",
"bootstrap": "^4.4.1",
"cordova-browser": "6.0.0",
"cordova-ios": "6.1.1",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-screen-orientation": "^3.0.2",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"highcharts": "^8.1.0",
"highcharts-angular": "^2.4.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.803.29",
"#angular/cli": "~8.3.23",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#ionic/angular-toolkit": "^2.1.1",
"#ionic/lab": "3.2.10",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-android": "^9.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-fcm-with-dependecy-updated": "^7.7.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-preview-any-file": "^0.1.7",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-preview-any-file": {},
"cordova-plugin-fcm-with-dependecy-updated": {}
},
"platforms": [
"android",
"browser",
"ios"
]
}
}
In Android it is working fine without flickering below you can see Gif.
In IOS it is not working ,it is flickering
can anyone help me from this issue