# Skeleton Loading Animation

## Content

FlexGrid supports skeleton loading content through [SkeletonLoadingBehavior](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.SkeletonLoadingBehavior.html). The behavior displays a skeleton loading animation while data is loading and provides visual feedback for unloaded items. [SkeletonLoadingBehavior](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.SkeletonLoadingBehavior.html) affects data sources that contain null items. Any item source can contain null items, including `C1VirtualDataCollection` while data is being retrieved.
![WinUI FlexGrid displaying Skeleton Loading content](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/SkeletonLoading2-20261008.759e76.gif?width=800&verticalAlign=middle)

## Configure the Data Source

In data-virtualization scenarios, some items can remain temporarily null while the data is being retrieved. Without `SkeletonLoadingBehavior`, FlexGrid displays these unloaded items as empty cells. The following `C1VirtualDataCollection` example provides the null-item loading scenario for `SkeletonLoadingBehavior`. It declares one billion items and creates the requested items as FlexGrid accesses them while scrolling.

```csharp
public class VirtualModeDataCollection : C1VirtualDataCollection<Customer>
{
    public int TotalCount { get; set; } = 1_000_000_000;

    protected override async Task<Tuple<int, IReadOnlyList<Customer>>> GetPageAsync(
        int pageIndex,
        int startingIndex,
        int count,
        IReadOnlyList<SortDescription> sortDescriptions = null,
        FilterExpression filterExpression = null,
        CancellationToken cancellationToken = default(CancellationToken))
    {
        await Task.Delay(2000, cancellationToken); // Simulates network traffic.

        return new Tuple<int, IReadOnlyList<Customer>>(
            TotalCount,
            Enumerable.Range(startingIndex, count)
                .Select(i => new Customer(i))
                .ToList());
    }
}
```

>type=warning
> Caution: A data source containing null items that do not represent unloaded items can cause the skeleton animation to display unexpectedly.

## Configure Skeleton Loading Content

Add [SkeletonLoadingBehavior](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Grid/C1.WinUI.Grid.SkeletonLoadingBehavior.html) to the FlexGrid behaviors collection, as shown in the following code:

```csharp
<c1:FlexGrid>
    <i:Interaction.Behaviors>
        <c1:SkeletonLoadingBehavior />
    </i:Interaction.Behaviors>
</c1:FlexGrid>
```

>type=note
> Note: WinUI does not provide an API for customizing the skeleton loading animation cell content.