Angular.js shows loading animations until the DOM is ready

Question

I am creating a Phonegap application with Angular.js. On the index page, you can click the "Show user list" button, which redirects you to the page that loads the template into ng-view. The template contains a list of users that are downloaded from $rootScope.usersand displayed using ng-repeat. The problem is that there are many users (now around 120), so page rendering is slow, especially in Phonegap. Therefore, when I click the "Show user list" button, the URL in the address bar changes immediately, but the content in ng-viewonly changes after a few seconds. Because of this, I want to display the loading animation until the visualization is displayed, so the user knows that the page is loading.

I created a loading animation - div with ng-show="loading.visible". I installed on the button ng-click="loading.visible=true", and in the controller of the page "users" I wrote:

angular.element(document).ready(function(){
            $scope.loading.visible = false;
        })

It works great the first time a button is pressed. The animation is displayed immediately and disappears when a list of users is displayed. But when I go back to the index page and click the "Show user list" button again, the loading animation will not be displayed until the user list is displayed, then it will appear for about 100 ms and disappear.

I am new to Angular, so I'm not sure how this works, can someone tell me what happened and is there a better solution to solve this problem? Thanks

Answer 1

$scope.$on('$viewContentLoaded', function () 
{
     $scope.loading.visible = false;
});

angular.element(document).ready(function(){});

ng-cloak angular.

, .