About

Blazor component that can render a customized Loader screen during WASM application loading time (used to could be added to the removed Index.html file). This components work with WebAssembly (WASM). For Server side render there is no loader needed since no Framework and Application donwload and delay. For code examples see usage.

You can try it out by using the demo app loading the application WASM AppLoader used.

Components

• AppLoader: Renders AppLoader component which is a customizable "Splash" screen. Previously it was used as a part of the Index.html file but now it is a Blazor component that can be used in the MainLayout.razor file. It is rendered during the application loading time and it is hidden when the application is fully loaded.

Properties

• ChildContent: RenderFragment HTML content - Required
  This is the content that will be displayed within the loader in the center of the screen.
• DelayTimeOut: int - Delay time in milliseconds to show the loader
  This is the time while the loader is visible. Default is 1500ms.

Configuration

Installation

Majorsoft.Blazor.Components.WASM.AppLoader is available on NuGet.

dotnet add package Majorsoft.Blazor.Components.WASM.AppLoader

Use the --version option to specify a preview version to install.

Usage

Add using statement to your Blazor <component/page>.razor file. Or globally reference it into _Imports.razor file.

@using Majorsoft.Blazor.Components.WASM.AppLoader

AppLoader usage

Following code example shows how to use AppLoader component in your .Client project. In the 'Layout/MainLayout.razor' file add the following code near the @Body tag (no conditions needed for visibility it is automatically handled internally in the component):

    <AppLoader DelayTimeOut="1500">
        @* Customize Splash screen here *@
        <img style="margin: 20px;" src="./blazor.app.png" />
        <h4>MY APPLIVATION <br /> Loading...</h4>
    </AppLoader>

    @Body