angular-spinner stops spinning before the page renders

Question

I have a angularJs view page, where many Web Services calls are being made to populate the page. I show the angular-spinner in one div and hide the content until all my data are fetched from a web service. However I noticed the spinner starts fine but it freezes (stop spinning) before the hidden div is rendered to a view. How do I keep the spinner spinning until the div gets rendered?

   $scope.myData = 'a huge list of records from a slow WebService';

    <div class="container">
        <div ng-show="!myData" spinner>Loading....
          <span us-spinner="{radius:30, width:8, length: 16}"></span>
        </div>

       <div ng-hide="!myData" class="details">
           <div>content 1<div>
           <div>content 2<div>
           ....
           <div>content n</div>
        </div>
    </div>
</div>

Do you use a service for getting the data? – Greg May 12 '16 at 11:38 — Greg, May 12 '16 at 11:38

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

I suppose that you use ng-repeat to render view and ng-repeat is async operation.
You should stop your spinner when ng-repeat will finish job.
ng-repeat finish event

edited May 23 '17 at 12:16

Community

1
1

answered May 12 '16 at 11:33

Andrii Tsarenko

655
7
21

score 0 · Answer 2 · answered May 12 '16 at 11:42

You should hide the loader when everything is loaded from the service with a promise

  $scope.showLoader = true;

  serv.getData = function () {
    var defer = $q.defer();

    $http.get(url).success(function (data) {
      $scope.data = data;
      $scope.showLoader = false;
    })

    return defer.promise;

  };

html

<div ng-show="showLoader" spinner>Loading....
   <span us-spinner="{radius:30, width:8, length: 16}"></span>
</div>

angular-spinner stops spinning before the page renders

2 Answers2