CODEWITHSUNDEEP
javascriptangularjsdom
kane
kane

Reputation: 6017

How to stop spinner after DOM is loaded

I am loading a lot of data and it seems to take a few seconds to paint the page even after the data has been received.

I'm simplifying my code below so please excuse any syntax errors in this toy example. My angularjs code is structured more or less like this

$scope.isLoading = true;
$http.get(url)
  .then(function(resp) {
    $scope.mydata = resp.data;
  })
  .finally(function() {
    $scope.isLoading = false;
  })

And my html is

<div class="spinner" ng-show="isLoading">
...
<!-- lots of data and complex DOM manipulation below -->

I also tried 

<div class="spinner" ng-hide="mydata">
...
<!-- lots of data and complex DOM manipulation below -->

In both cases, I get a spinner, then the spinner disappears, then several seconds go by, before the data finally shows up. If the data is smaller, then the delay is much less noticeable.

When I look at my browser's developer tools, the data is received and the spinner immediately goes away. Then the multi-second delay happens before the page finally loads. So I suspect the browser is trying to write the DOM

I would like to trim the delay between the spinner disappearing and the page appearing.

Is there some sort of hook/callback that's invoked after all the DOM is written?

Upvotes: 1

Views: 378

Answers (1)

Estus Flask
Estus Flask

Reputation: 222379

Since visual delay is caused by the fact that DOM is updated synchronosly on digest synchronously and blocks main thread, spinner removal should be postponed at least for one tick:

$http.get(url)
  .then(function(resp) {
    $scope.mydata = resp.data;
  })
  .finally(function() {
    return $timeout(function () {
      $scope.isLoading = false;
    })
  })

Timeout delay can be increased to non-zero value (e.g. 20), depending on how the parts of the application that cause a freeze work. A new digest caused by $timeout can cause a new freeze, so the problem possibly should be solved with optimizations.

Upvotes: 1

Related Questions