CODEWITHSUNDEEP
javascriptangularjs
Prashant Shukla
Prashant Shukla

Reputation: 261

Too much delay to load data into DOM after successful response of service in Angularjs

I try to load very large set of data into html table

  1. Click on button.

    <a ng-click="get_product()">load data</a>

  2. button call a function get_product

    $scope.get_product = function () {
  // loader image shown
  var get_product = PAYMENTCOLL.getStatusBasedPaymentCollection(); //service call
  get_product.success(function (data)
  {
    $scope.pagedItems = data; //set data into array
  });
  //loader image hide
};

  3. load pagedItems array into html table using ng-repeat.

Case 1:

In case of small set of data the "loader image hide" when data completely has been loaded into DOM.

Case 2:

In case of Large set of data "loader image hide" but the data is still loading into DOM (it will take 3-4 seconds more to load data after hide loader).

Purpose:

My purpose is to show loader image until all data is successfully loaded into DOM. After loading all data into DOM I want to hide loader image.

How can I resolve case 2 Issue ? Thanks Ahead

Upvotes: 0

Views: 439

Answers (1)

IronAces
IronAces

Reputation: 1883

Have you considered using promises?

Use $q promise so that you can set $scope.showLoaderImage once the promise has been fulfilled.

$scope.get_product = function () {
    $scope.showLoaderImage = true;
    PAYMENTCOLL.getStatusBasedPaymentCollection().then(function (e) {
        $scope.showLoaderImage = false;
        $scope.pagesItems = e.data.d;
    }, function (err) {
        //Handle Errors
    })
};

In order to reflect the state of $scope.showLoaderImage in your DOM, use ngShow, as below:

<div ng-show="showLoaderImage">
   <!-- Image here -->
</div>

Upvotes: 1

Related Questions