I faced a problem. I have an input element and function to show "loading" animation. The problem is that once I drop files or click and select them "loading" animation shown with a few seconds delay (multiple files or big size file).
Note: solution made with Angular 2+ that's why (change)
Solution 1:
HTML:
<input type="file" multiple="true" (change)="uploadImgs($event)"/>
JS:
uploadImgs(event: any) {
console.log('START UPLOAD!')
this.spinnerService.start();
///restOfTheLogic...}
Solution 2: use onDrop event to trigger this.spinnerService.start(); which show animation
HTML:
<div (drop)="spinnerService.start();">
<input type="file" multiple="true (change)="uploadImgs($event)"/>
</div>
Solution 3: trigger both functions with onChange/onDrop
HTML:
<input type="file" multiple="true (change)="spinnerService.start(); uploadImgs($event)"/>
Output:
In all cases after I drop files, I can see console.log('START UPLOAD!') output in the console immediately, but then it's delay before animation actually appears.
Animation function simply:
start() {
document.getElementById('loading').classList.remove('hidden');
}
I tried to search on my own. But stacked why 1st line console.log is executed immediately and 2nd line this.spinnerService.start(); executed with delay? Is it waiting while files data will be read or something else before manipulating with DOM elements?
Is there are any ideas how to avoid such delay?
