While my angular app is loading all the necessary content through ajax, I display a loader on top of the content on a darker layer.
The SVG used in this process contains an animateTransform:
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /></path><circle fill="#fff" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /></circle></g></g></svg>
There are a total of 4 ajax calls, and sometimes the loader freezes before the animation restarts once all the calls are completed.
Here is the relevant Angular code snippet:
<script type="text/javascript">
var myApp = angular
.module('appName', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
.service('dataService', function($http) {
function getInfos() {
return $http.get(currentUrl + '/infos');
}
function getCountries() {
return $http.get(currentUrl + '/countries');
}
function getCatgeories() {
return $http.get(currentUrl + '/categories');
}
function getPrices() {
return $http.get(currentUrl + '/prices');
}
return {
getInfos: getInfos,
getCountries: getCountries,
getCatgeories: getCatgeories,
getPrices: getPrices
};
})
.controller('appNameController', function($scope, dataService) {
$scope._loading = {
start: function() {
if($('.loader').hasClass('off')){
$('.loader').removeClass('off');
}
},
stop: function() {
if(!$('.loader').hasClass('off')){
$('.loader').addClass('off');
}
}
};
$scope._loading.start();
$scope.checkPageLoader = function() {
if($scope.hidePageLoader == 4) {
$('#loaderText').html('<span>App is Ready!</span>');
$scope._loading.stop();
}
};
$scope.hidePageLoader = 0;
$scope.getInfos = function() {
dataService.getInfos().then(function(res) {
$scope.infos = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Infos</span>');
$scope.checkPageLoader();
});
};
dataService.getCatgeories().then(function(res) {
$scope.categories = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Categories</span>');
$scope.checkPageLoader();
});
dataService.getPrices().then(function(res) {
$scope.prices = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Prices</span>');
$scope.checkPageLoader();
});
$scope.getCountries = function() {
dataService.getCountries().then(function(res) {
$scope.countries = res.data;
$scope.hidePageLoader += 1;
$('#loaderText').append('<span><i class="icon-check"></i>Countries</span>');
$scope.checkPageLoader();
});
};
angular.element(document).ready(function () {
$scope._loading.start();
$scope.getInfos();
$scope.getCountries();
/* $scope.priceValues(); */
});
});
</script>
Can anyone provide insight into why this issue is occurring?