--- title: "Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid" published_at: "2022-10-31T12:19:27+00:00" modified_at: "2026-02-10T06:38:01+00:00" url: "https://www.syncfusion.com/blogs/post/skeleton-loading-indicator-in-essential-js-2-datagrid" excerpt: "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..." taxonomy_category: - "Angular" - "DataGrid" - "Essential JS 2" - "JavaScript" - "React" - "Syncfusion" - "Vue" - "Web" taxonomy_post_tag: - "Angular" - "DataGrid" - "JavaScript" - "Loading Indicator" - "React" - "Vue" --- # Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid [Maithiliy K](https://www.syncfusion.com/blogs/author/maithiliyk) ![Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Introducing-Skeleton-Loading-Indicator-in-Syncfusion-Essential-JS-2-DataGrid.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) release onward, Syncfusion’s [Essential JS 2 DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid) 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. ``` 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'); ``` ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Skeleton-Loading-Indicator-with-Shimmer-Effect-in-Paginated-DataGrid.gif) Skeleton Loading Indicator with Shimmer Effect in Paginated DataGrid ### 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. ``` 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'); ``` ![Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Skeleton-Loading-Indicator-Support-for-Virtualization-Enabled-DataGrid-1.gif) Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid ## 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/) and [demos](https://ej2.syncfusion.com/demos/#/bootstrap5/grid/loading-animation) . [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2) ## 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) in the [2022 Volume 3](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) 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) and [What’s New](https://www.syncfusion.com/products/whatsnew) pages to see all the new updates in this release. You can also contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . 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) - [SyncfusionEssential Studio® 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx) - [Top 7 Javascript Object Destructuring Techniques](https://www.syncfusion.com/blogs/post/top-7-javascript-object-destructuring-techniques.aspx) - [Functional Reactive Programming With Node.Js Streams](https://www.syncfusion.com/blogs/post/functional-reactive-programming-with-node-js-streams.aspx) - [5 Different Ways To Deep Compare Javascript Objects](https://www.syncfusion.com/blogs/post/5-different-ways-to-deep-compare-javascript-objects.aspx)