LIDOR SYSTEMS

Advanced User Interface Controls and Components

Loading Animation in AngularJS Grid

Created: 16 October 2015

When you want to load large data into the Grid, it may take some time during which some notification that loading is in the process is required. AngularJS Grid directive comes with built-in functionality that allows you to show a loading animation during this process.

TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Animation Type:


Max columns:
Max rows:
Levels:


There are two types of loading animation presented above: circular and linear, with several different speed levels.

Note You can change the appearance of loader using CSS. Circular animation uses an image that rotates, and linear animation uses a progress bar. All of these are customizable using CSS styles.

Linear Loading Animation

This type of loading animation is best suitable when thousands of rows are loaded into the grid. During this process, the update of the grid layout may take some time, because adding multiple elements to the DOM takes time.

By showing a progress bar during this load process, you can notify the user of the update progress. To start an animation we are using the beginLoad method, which must end by calling the endLoad method. Here is a sample code on this process:

$scope.loadLocal = function(){

// Start loading animation

$gridService.beginLoad($scope.gridName, null, { type: $scope.animationType, speed: $scope.animationSpeed, opacity: 0.25 });

 

// Suspend the Grid layout from any changes to increase performance

$gridService.suspendLayout($scope.gridName);

 

// Remove all columns and rows from the Grid

clearList();

 

// Populate the TreeGrid with data

addColumns();

addRows(null, 0);

 

// Resume and update the Grid layout

$gridService.resumeLayout($scope.gridName);

}

 

// Handle loadComplete event to end the loading animation

$scope.onLoadComplete = function(){

$gridService.endLoad($scope.gridName);

}

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" load-complete="onLoadComplete()"></iui-treegrid>

The endLoad method is best called after loading is fully completed. When grid layout is updated and data is fully loaded, the loadComplete event is fired. We can handle this event to add a call to the endLoad method and finish the loading animation.

In our demo, from control panel on the right you can choose how many columns and rows you want to add to the grid. In addition, you can choose the speed by which loading animation will execute.

There are five speed levels available:

  • veryfast - animation takes less than 1 second
  • fast - animation takes approximately 1 second
  • normal - animation takes 1-2 seconds
  • slow - animation takes few seconds
  • veryslow - animation takes several seconds

Circular Loading Animation

In similar way, we can display a circular animation. This animation as a loader uses an image that rotates with speed depending on the speed level set.

This loading animation is best suitable when we want to add small or large data sets from a remote data source, using a JSON file as a data source for example. we can start this animation using the same methods as above, we only need to change the value of animation type field.

$scope.loadRemote = function(){

// Start loading animation

$gridService.beginLoad($scope.gridName, null, { type: $scope.animationType, speed: $scope.animationSpeed, opacity: 0.4 });

 

// Retrieve data from a JSON file

var dataSource = $http.get('large-data.json');

if (dataSource){

dataSource.success(function(data){

if (data.length == 2){

// Suspend the Grid layout from any changes to increase performance

$gridService.suspendLayout($scope.gridName);

 

// Remove aany existing columns and rows from the Grid

$gridService.clearColumns($scope.gridName);

$gridService.clearRows($scope.gridName);

 

// Add Columns to the Grid

for (var j = 0; j < data[0].columns.length; j++){

$scope.columns.push(data[0].columns[j]);

}

 

// Add Rows to the Grid

$gridService.loadData($scope.gridName, data[1].rows);

 

// Resume and update the Grid layout

$gridService.resumeLayout($scope.gridName);

}

});

dataSource.error(function(data){

$gridService.endLoad($scope.gridName);

alert("AJAX failed to Load Data");

});

}

}

 

// Handle loadComplete event to end the loading animation

$scope.onLoadComplete = function(){

$gridService.endLoad($scope.gridName);

}

In our demo, we are using a large JSON file as our data source. This file contains 10,000 rows with 25 columns, and it takes some time to load it in full. During this process, if we don't show some kind of notification that loading is in the process, the grid may appear as empty for several seconds, during which UI interaction may not be available. Because of this, showing a circular animation is the best choice.

After data is fully loaded, the loadComplete event is fired and endLoad method is called, so that animation stops and grid displays loaded data.

Conclusion

It is always good to notify the user that loading is in the process. We can either display small message stating data load is in process, or like in this example, showing a loading animation. Grid directive for AngularJS handles both circular and linear animations with option to choose among several speed levels. Depending on data size and source, you can determine which kind of animation is best suitable for your application, in some cases you may need to use them both.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.