Blazor — New Wait Indicator and Loading Panel (v23.1)

Our most recent update (v23.1) includes two new Blazor UI components (Wait Indicator & Loading Panel). These new components allow you to visually communicate the state of load operations within your Blazor-powered app. In this blog post, I’ll show you how to incorporate these components into your next Blazor project.

Loading Panel

A key aspect of responsive web design is to communicate progress/loading state with users. You can display loading indicators when loading complex UI forms, retrieving data for an existing form, etc. Depending on the use case, you may want to hide content or disable user interaction with the content. You can use our new Loading Panel for Blazor to address these specific requirements.

A Loading Panel component displays a loading indicator overlay atop components and containers. You can prevent users from interacting with content under the panel, apply shading to content, or completely hide content during load operations. And of course, you can apply customizations to the panel’s indicator as needs dictate.

The Loading Panel can serve both as a standalone component and a container. 

You may specify Loading Panel without additional parameters and manage the Visible property value to display/hide the Loading Panel when an operation begins/finishes. In such instances, the panel occupies the entire parent container. This approach will be useful if you want to display Loading Panel instead of content area during page load operations when a user navigates between pages.

@if (SomeCondition == null) { 
    <DxLoadingPanel /> 
} 
else { 
    ... 
} 

You can also specify the panel’s PositionTarget property to attach it to target content. This may come in handy in the following situations:

• You want to cover the entire web page. 
• You are going to reuse the same Loading Panel across your application. 
• It is important to keep your content at a specific position in the DOM.

<DxFormLayout>  
    <DxFormLayoutGroup Caption="Target Group" Id="show-panel">  
        @* ... *@  
    </DxFormLayoutGroup>  
</DxFormLayout>  

<DxLoadingPanel Visible="true" ApplyBackgroundShading="true" PositionTarget="#show-panel" /> 

In other instances(for example, when you declare Loading Panel in the same place as its target content), you can use the component as a container. When implemented in this manner, Loading Panel behaves as a <div> with fixed position. Specify target content as the panel’s Child Content to proceed:

<DxLoadingPanel @bind-Visible="PanelVisible"> 
    <DxGrid Data="DataSource">@* … *@</DxGrid> 
</DxLoadingPanel> 

Refer to the following demo page for full code and additional examples: Loading Panel – Overview.

Wait Indicator

If you need to indicate progress in a more subtle manner - without hiding content or overlaying target content - you may find our new Wait Indicator for Blazor of value. Wait Indicator allows you to indicate loading on button click or indicate progress of an asynchronous operation related to a data editor. This component is designed so that it can be easily embedded into other components, such as DxButton and Data Editors. Indicator size is adjusted to inner elements of other components and does not require additional customizations.

Specify Wait Indicator as a component’s child content and use the Visible property to display the indicator as your requirements dictate:

<DxButton Enabled="!isSending" RenderStyle="ButtonRenderStyle.Secondary">  
    <DxWaitIndicator Visible="isSending" />  
    <span class="mx-2">@Message</span>   
</DxButton> 

You can also change the indicator’s animation or add a custom icon.

Refer to the following sources for more additional guidance: Demos | Documentation

Your Feedback Matters

Please take a moment and review the following survey questions. Your feedback will help us refine our Blazor UI product line to meet and exceed your expectations.