How to use loading module until a long and graphical page fully loaded?

ionic-v1
1

I am starting to test ionic framework. I have downloaded a new app example published by devgirl:

http://devgirl.org/2014/03/12/sample-phonegap-application-itunes-explorer-with-angularjsionic/

it was working pretty good UNTIL i have changed settings page on this app added some graphics on the background and then added more list items.

After that i have noticed, when i clicked on settings it became very sluggish sliding animation.

I think there could be 2 solutions.

1- After tap event, (gave up on sliding) immediately appearing loading gif until page loads then showing page.

2- After tap event sliding to page but to an empty page with loading gif. After page fully loaded show the page.

So, how can i achieve one of these ?

Sorry i am pretty knew to angularjs and ionic but i couldn’t found how to adopt a solution. Here is the my .js file:

    'use strict';

/* App Module */
var mediaApp = angular.module('mediaApp', ['ionic','ngResource'])

mediaApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('menu', {
            url: "/menu",
            abstract: true,
            templateUrl: "menu.html"
        })
        /* Could update home to be in it's own separate file */
        .state('menu.home', {
            url: "/home",
            views: {
                'menuContent' :{
                    templateUrl: "views/home.html"
                }
            }
        })
        .state('menu.search', {
            url: "/search",
            views: {
                'menuContent' :{
                    templateUrl: "views/search.html",
                    controller: "SearchCtrl"
                }
            }
        })

        .state('menu.settings', {
            url: "/settings",
            views: {
                'menuContent' :{
                    templateUrl: "views/settings.html",
                    controller: "SettingsCtrl"
                }
            }
        })
        .state('menu.about', {
            url: "/about",
            views: {
                'menuContent' :{
                    templateUrl: "views/about.html",
                    controller: "AboutCtrl"
                }
            }
        });

    $urlRouterProvider.otherwise("/menu/home");
})
2

You probably want to start with ionicLoading to get a loading spinner up on the page. I had a similar issue while trying to load a background image and then update my page once loading had completed. The solution I arrived at involved watching the target dom element for the ‘load’ event and then hiding the loading spinner.

If you have a reference to the dom element that you’re trying to load, you can do something like:
$scope.loadingSpinner = $ionicLoading.show( ... ) element.on('load', () => $scope.loadingSpinner.hide())

Hope that helps.