Show spinner while view loads

Hi I’m building a App where I’m using the sidemenu. Some of my view are quite heavy on loading (before cashed). How can I show a overlay/spinner when I click a menuitem in the sidemenu and first hide the spinner and show the view (slide in the view) when all content in the view is loaded?

Thanx.

Are you not looking for http://ionicframework.com/docs/api/service/$ionicLoading/ ?

Sure, this is part of the solution. But how do i know when the view is fully loaded? I need som preloading or?
The flow I’m looking for is:

  1. click on menuiten in sidemenu
  2. UI blocks and shows loading while choosen view loads
  3. Loading finishes and UI unlocks
  4. new view slides in

You need to use resolve on the state change : https://github.com/angular-ui/ui-router/wiki#resolve

Onclick show the Ionic loader and trigger the view change. Then do all your loading and when the promise returns the new page would load - on resolve hide the loader.

Super, thanx! I will look into this when I get home. I will reply when I get it to work… (or need even more help)

You can also use one of the ionic view events: http://ionicframework.com/docs/api/directive/ionView/

1 Like

I need same, and cant find good solution, maybe someboy have good example.

This is works with $ionicLoading… thank you!

$scope.$on('$ionicView.beforeEnter', function(e) {
                $ionicLoading.show({
                    animation: 'fade-in', showBackdrop: true
                });
            });
            $scope.$on('$ionicView.afterEnter', function(e) {
                $ionicLoading.hide();
            });