Loading

When people have to wait for your application to load data, the application should indicate that it is busy. DIPS delivers ways for you to display loading indication in your application.

Skeleton

A skeleton is an animated placeholder that occupies space in the page that is loading while the data is loading. Once the content is finished loading, the animated placeholder will disappear and your content will appear. The animated placeholder will simulate the layout while it's loading the layout. This gives the user the impression that the application is faster because they already know what type of content is loading before it appears. This is referred to as perceived performance.

Usage

<dui:SkeletonView IsLoading="{Binding IsBusy}">
    <dui:SkeletonView.Shapes>
        <dui:SkeletonShape  />
    </dui:SkeletonView.Shapes>
    <dui:ListItem Title="Name"
                  Subtitle="This is the item that will load">
        <dui:Label Text="Amund Amundsen" />
    </dui:ListItem>
</dui:SkeletonView>

Once the IsBusy property is set to true, the skeleton view will replace the ListItem with an animated placeholder. The animated placeholder will use the entire space that the ListItem has. You can add multiple SkeletonShapes, and the SkeletonShape can be customised. The idea with it is that you can tell it how it should look, because it does not know how the layout looks. The SkeletonShape lives inside a Grid, this means that you can have multiple shapes placed in a column / row order for it to look the best while its visible.

Properties

Inspect the SkeletonView properties class and SkeletonShape properties class to further customise and use it.