Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid
Tags: angular, react, vue, javascript
Published: 2022-11-01 03:22:35

---
title: Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid
published: true
date: 2022-10-31 12:19:27 UTC
tags: angular, react, vue, javascript
canonical_url: https://www.syncfusion.com/blogs/post/skeleton-loading-indicator-in-essential-js-2-datagrid.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pne1elgtalranit2b76h.png
---

In modern UI design, most of us expect to show visual effects until the control is ready for user interaction. A skeleton effect shows a loading indicator in the shape of the content to be loaded in a control. In a grid, a skeleton effect would display rows and columns without any data.

From the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Main Release") release onward, Syncfusion’s [Essential JS 2 DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid") supports a skeleton loading indicator (shimmer effect) between fetching data from the server (or another service) and binding it to the grid during initial rendering, while refreshing, or after performing any grid actions like sorting, filtering, or grouping.

In this blog, we will see how to visualize the skeleton loading indicator for various features in our Essential JS 2 DataGrid.

## Enable skeleton loading indicator in Syncfusion Essential JS 2 DataGrid

Syncfusion DataGrid supports both **spinner** and **shimmer** effects as loading indicators. In modern design, the shimmer effect is preferred over a spinner.

Both paginated and virtualization-enabled grids are used to visualize a huge volume of data without any performance degradation. Let’s see how to enable the shimmer effect for both paginated and virtualized grids in our Essential JS 2 DataGrid.

### For paginated DataGrid

In a pagination-enabled DataGrid, we can enable the shimmer effect by setting the **loadingIndicator** property as **Shimmer**. The default value of loadingIndicator is Spinner. So, we have to define this property to use the shimmer effect.

This doesn’t mean that the shimmer effect will be shown for pagination alone. It can also be shown while performing other grid actions. The skeleton loading indicator will be shown to represent the grid content layout whenever the grid is waiting for content.

Refer to the following code example.

```js
import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source
 
Grid.Inject(Page);
 
let grid: Grid = new Grid(
{
  dataSource: orderData,
  allowPaging: true,
  loadingIndicator: { indicatorType: 'Shimmer' },
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
  ],
  pageSettings: { pageSize: 7 }
});
grid.appendTo('#Grid');
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Skeleton-Loading-Indicator-with-Shimmer-Effect-in-Paginated-DataGrid.gif" alt="Skeleton Loading Indicator with Shimmer Effect in Paginated DataGrid" style="width:100%">

  <figcaption>Skeleton Loading Indicator with Shimmer Effect in Paginated DataGrid</figcaption>

</figure>


### For virtualization-enabled DataGrid

In a virtualization-enabled DataGrid, instead of loading all the data, the data will load on demand while the user scrolls the DataGrid with the vertical scroll bar.

Syncfusion Essential JS 2 DataGrid allows you to show the skeleton shimmer effect while loading data on demand, and you can enable this feature by setting the **enableVirtualMaskRow** property value as **true**.

Refer to the following code example.

```js
import { VirtualScroll, Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source
 
Grid.Inject(VirtualScroll);
 
let grid: Grid = new Grid(
{
  dataSource: orderData,
  enableVirtualization: true,
  height: 400,
  enableVirtualMaskRow:true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
 
  ],
});
grid.appendTo('#Grid');
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Skeleton-Loading-Indicator-Support-for-Virtualization-Enabled-DataGrid-1.gif" alt="Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid" style="width:100%">

  <figcaption>Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid</figcaption>

</figure>


## Other DataGrid features with skeleton loading indicator

Let’s see the shimmer effect in other features of the Essential JS 2 DataGrid.

### Single column grouping ![Shimmer effect support for single column grouping in Essential JS 2 Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Single-column-grouping.jpg)

### Multiple column grouping ![Shimmer effect support for multiple column grouping in Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Multiple-column-grouping.jpg)

### Group caption aggregate ![Shimmer effect support for group caption aggregate in Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Group-caption-aggregate.jpg)

### Footer aggregate ![Shimmer effect support for footer aggregate in Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Footer-aggregate.jpg)

### Hierarchical DataGrid

### ![Shimmer effect support for hierarchical DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Hierarchical-DataGrid.jpg)

### Checkbox column ![Shimmer effect support for checkbox column in Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Checkbox-column.jpg)

### Checkbox filtering ![Shimmer effect support for checkbox filtering in Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Checkbox-filtering.jpg)

## References

For more details, refer to our [Syncfusion Essential JS 2 DataGrid documentation](https://ej2.syncfusion.com/documentation/grid/loading-animation/ "Animation loading in JavaScript Grid control documentation") and [demos](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/loading-animation "Loading animation in JavaScript DataGrid demo").

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the skeleton loading indicator (shimmer effect) in our [Essential JS 2 DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "Syncfusion JavaScript DataGrid") in the [2022<u> Volume 3</u>](https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.syncfusion.com%2Fforums%2F175975%2Fessential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-download&data=05%7C01%7Cmaithiliyk%40syncfusion.com%7C4596aa83c567486b056e08da5b21de14%7C77f1fe12b04949198c509fb41e5bb63b%7C0%7C0%7C637922498259314828%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=y%2BNwusleMcjoWn3vXA%2F9tUUDzli5WUUZW%2FP%2FsQsJ2XM%3D&reserved=0 "Essential Studio 2022 Volume 2 Main Release") release. Try out this great feature and provide your feedback in the comments section below.

Also, check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New page") pages to see all the new updates in this release.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [What’s New in 2022 Volume 3: Essential JS 2](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-essential-js-2.aspx "Blog: What’s New In 2022 Volume 3: Essential Js 2")
- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Top 7 Javascript Object Destructuring Techniques](https://www.syncfusion.com/blogs/post/top-7-javascript-object-destructuring-techniques.aspx "Blog: Top 7 Javascript Object Destructuring Techniques")
- [Functional Reactive Programming With Node.Js Streams](https://www.syncfusion.com/blogs/post/functional-reactive-programming-with-node-js-streams.aspx "Blog: Functional Reactive Programming With Node.Js Streams")
- [5 Different Ways To Deep Compare Javascript Objects](https://www.syncfusion.com/blogs/post/5-different-ways-to-deep-compare-javascript-objects.aspx "Blog: 5 Different Ways To Deep Compare Javascript Objects")