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