0

With Ionic3, I am using VirtualScroll with an array that is changing (sort key and sort order). I want to display a spinner before manipulating the array and hide it when done. Basically

.html

<ion-list [virtualScroll]="vsArray">
    <button ion-item *virtualItem="let item" (click)="didSelectRow(item)">
        {{item}}
    </button>
...

.ts

document.getElementById("mySpinner").setAttribute('style', 'visibility:visible');
tmpArray = vsArray;    //prevent virtualScroll reset/trigger
tmpArray.sort(...);    //prepare array
vsArray = tmpArray;    //trigger virtualScroll update
document.getElementById("mySpinner").setAttribute('style', 'visibility:hidden');

The problem is that the spinner DOM updates happen is sequence and VirtualScroll update triggered by vsArray change happens asynchronously after this code sequence. I tried using DOMController.write instead of accessing DOM directly, but I have the same behaviour since the spinner DOM updates are queued before VirtualScroll DOM updates.

How can I make sure the spinner hides only after the VirtualScroll update is completed ???

Thanks for any input

pic
  • 11
  • 6

1 Answers1

0

Ionic 3 has the <ion-spinner></ion-spinner> component that you can use. Add at somewhere at the top of your <ion-list>. And, add an *ngIf to it to show and hide it.

<ion-spinner *ngIf="showSpinner"></ion-spinner>
<ion-list ...>

@Component({ ... })
export class ComponentName {
  showSpinner:boolean = true; // default so it shows 

  getDataForIonList() {
     this.someAPI.get()
     .then((res:any) => {
        this.showSpinner = false;
     });
  }

}
junerockwell
  • 838
  • 1
  • 9
  • 29
  • The problem is not the ability to show or hide the spinner. The problem is find THE hook in VScroll update to make sure spinner.hide is called inly after vScroll update is completed. – pic Nov 03 '18 at 03:05