Loading big dataset quickly in angularjs

I needed to load a big dataset without using the classic ajax-loader.gif with angularjs.
The problem is that angularjs has limited performance when it comes to render the view using $rootScope.$digest().
So when you try to render a big dataset, the view would hang while it's rendering.

I ended up slicing the dataset with enough records to fill up the visible part on the view and then load everything using a timeout. This kind of simulates instantaneous loading.

The data could be ordered on the view, so I needed to load as much as possible in one go, otherwise the user could see live reordering of the dataset.

//Variable to hold the deferred function 
var loadAll;
$scope.loadAllData = function() {

 //Give a max of 40 rows to the view
 if ( $scope.bigdata.length > 40 ) {
 $scope.dataView = $scope.bigdata.slice(0,39);
 } else {
 $scope.dataView = $scope.bigdata;
 }

 //Cancel previous deferred function
 if(loadAll !== undefined) {
 $timeout.cancel(loadAll);
 }

 //Will load all the rest of data after 1.5s
 loadAll = $timeout(function() {
 $scope.dataView = $scope.bigdata;
 }, 1500);

};

If your dataset has no need for ordering or if you don't mind, prefer the solution with a recursive call :

//Variable to hold the deferred function 
 var start,end = 0;
 var ls = 40; //Length of subset
 $scope.loadAllData = function() {

 end+= ls;

 if ( end < $scope.bigdata.length ) {
 $scope.dataView = $scope.bigdata.slice(start,end);
 start+= ls;
 $timeout(function() {
 $scope.loadAllData();
 }, 100);
 } else if (end > $scope.bigdata.length 
 && start < $scope.bigdata.length) { //last load
 $scope.dataView = $scope.bigdata.slice(
 start, $scope.bigdata.length - 1
 );
 }

 };

Related protips

Have a fresh tip? Share with Coderwall community!