Ionic spinners (Animated Loader) getting stuck while performing localstorage operations

I have implemented ionic spinners (Animated Loader) in the application and also I am using localstorage to save the data.

When the application communicates with the server ionic spinner works properly, that is it renders smoothly without getting stuck. Once the communication with the server is done and the downloaded data needs to be inserted (saved) in the localstorage the spinner gets stuck (does not render properly).

In different blogs what I have observed is that localstorage does not render UI properly while data is getting inserted(saved).

Kindly let me know is there any work around for this problem or is there any other way of implementing animated loader (Ionic Spinner)

Below is the code that I have implemented

app.factory('LoaderService', ['$ionicLoading', '$timeout', function ($ionicLoading, $timeout) {
return {
    show: function () {
        var templateVal = "<ion-spinner icon='android'></ion-spinner>";
        $ionicLoading.show({
            animation: 'fade-in',
            showBackdrop: true,
            minWidth: 200,
            showDelay: false,
            template: templateVal
        });
    },
    hide: function () {
        $timeout(function () {
            $ionicLoading.hide();
        }, 300);            
    }
}
}]);