I have a problem and I do not know what to do and how to fix it, I'm doing a system (with AngularJs, javascript) which loads large excel files, so it takes a while to process the data, so choose for putting a gif of loading when this happens. The problem is that sometimes shows the image but the gif does not move and other times nothing is shown, try to hide and show it with javascript using visibility and display and the problem persists, could someone help me?
I am using the SheetJS library.
When I upload the Excel file it should show the div but it does not work, I also tried using this.
document.getElementById ("showLoading"). style.display="block"; and document.getElementById ("showLoading"). style.visibility="visible";
But sometimes it works and shows the gif but static and other shows nothing.
processData.controller('ProcessHomescope$scope', function HomeController($scope) {
$scope.showLoading=false;
$scope.updloadTeradata = function (e) {
//Aca muestro el div donde se deberia mostrar la imagen
$scope.showLoading=true;
var files = e.target.files, f = files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (!rABS) { data = new Uint8Array(data); }
workbook = XLSX.read(data, { type: rABS ? 'binary' : 'array' });
elementsTeradata=saveValues(workbook);
//Escondo nuevamente el div
$scope.showLoading=false;
//console.log(workbook);
alert("Ingrese segundo Archivo");
};
if (rABS) { reader.readAsBinaryString(f); } else { reader.readAsArrayBuffer(f); }
};
});<div ng-show="showLoading">
<img src="assets/img/spark.gif">
<div class="loading-text">Cargando...</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Subir Excel de Teradata</p>
<input type="file" name="teradata" id="teradata" custom-on-change="updloadTeradata"/>
</div>
</div>