Show spinner while view loads

ionic-v1
1

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.

2

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

3

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
4

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.

5

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)

6

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

1 Like
7

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

8

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();
            });