Currently, I am developing an application using the Ionic framework. My goal is to display a loading spinner until all the data is retrieved from an API.
In the Controller.js file:
.controller('PrayersCtrl', function($scope, Prayers, $ionicLoading, $timeout) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
$scope.prayers = Prayers.query();
$ionicLoading.hide();
})
And in the Services.js file:
angular.module('starter.services', [])
.factory('Prayers', function($resource) {
return $resource(base_url+'/wp/v2/posts');
});
The issue I'm facing is that the spinning wheel doesn't show up properly; it appears and disappears very quickly, then there's a delay in loading the data. During this time, a blank page is displayed until the data is loaded. My objective is to keep showing the spinning wheel until the data is fully loaded on the page.
Updated Approach
I also attempted to use a timeout function in the controller.js:
.controller('PrayersCtrl', function($scope, $stateParams, Prayers, $ionicLoading, $timeout) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
$timeout(function () {
$ionicLoading.hide();
$scope.prayers = Prayers.query();
}, 2000);
})
However, with this approach, the spinning wheel disappears after 2000 ms according to the code. What I truly want is for the spinning wheel to continue displaying until all the data is completely loaded.