I am facing a challenge in loading a large set of data into an HTML table.
To begin, you need to click on a button:
<a ng-click="get_product()">load data</a>This button triggers a function called get_product:
$scope.get_product = function () { // display loader image var get_product = PAYMENTCOLL.getStatusBasedPaymentCollection(); //service call get_product.success(function (data) { $scope.pagedItems = data; //store data in an array }); //hide loader image after loading };The
pagedItemsarray is then loaded into the HTML table usingng-repeat.
Scenario 1:
If the dataset is small, the loader image will hide once all data is loaded into the DOM.
Scenario 2:
For larger datasets, the loader image hides early but the data continues to load into the DOM (taking around 3-4 seconds more).
Purpose:
My goal is to keep the loader image displayed until all data is fully loaded into the DOM. Once everything is loaded, I want to hide the loader image.
How can I address the issue in Scenario 2? Thank you in advance.