Skip to content

Loading

Jump to bottom
Vetle444 edited this page Aug 11, 2025 · 3 revisions

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.

LoadingOverlay

A LoadingOverlay is a component that displays a semi-transparent overlay with a loading indicator on top of existing content. It is useful when you want to indicate that a specific part of your application is busy loading data, without blocking the entire UI. The overlay prevents user interaction with the underlying content until the loading is complete, providing a clear visual cue that an operation is in progress.

Properties

The LoadingOverlay component exposes several properties to customize its appearance and behavior:

  • Text: Sets the loading message displayed in the overlay. For example, Text="Loading documents..." will show a custom loading message.
  • ContentColor: Defines the color of the loading indicator and text. For example, ContentColor="Black" sets the content color to black.
  • OverlayColor: Sets the background color of the overlay. For example, OverlayColor="White" makes the overlay background white.
  • ContentFadeOutValue: Controls the opacity of the underlying content when the overlay is active. A value of 0 will fully fade out the content, while higher values make it more visible.

These properties allow you to tailor the LoadingOverlay to fit your application's design and user experience requirements.

Usage

<dui:LoadingOverlay IsBusy="{Binding IsBusy}">
    <dui:Label Text="This content will be overlaid while loading." />
</dui:LoadingOverlay>

When the IsBusy property is set to true, the LoadingOverlay will appear above the content, showing a loading spinner and blocking interaction. Once loading is finished and IsBusy is set to false, the overlay disappears and the user can interact with the content again.

Properties

You can customize the appearance and behavior of the LoadingOverlay by inspecting the LoadingOverlay properties class.

Clone this wiki locally