Is there a way to implement a loading animation, such as a basic circular animation in Ionic, specifically for loading individual tabs? I have successfully used $ionicLoading for my splash screen, but I am struggling to incorporate it for individual views where I want the tab bar to remain visible while the loading animation is displayed and the view is hidden.
Below is the code snippet for the splash screen loading:
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function ($scope, $ionicLoading) {
$scope.show = function () {
$ionicLoading.show({
template: 'Loading...',
noBackdrop: 'true',
}).then(function () {
console.log("The loading indicator is now displayed");
});
};
$scope.hide = function () {
$ionicLoading.hide().then(function () {
console.log("The loading indicator is now hidden");
});
};
})
I attempted to use this code within a view similarly, but nothing appeared. How can I properly utilize this code in a view? Alternatively, is there a method to pre-load all content into cache/RAM to eliminate lag time when switching between tabs? Some of my tabs contain images that load slowly after the text.