Using SplashScreen during startup?

[fkitsantas]

Hello,

Is there any way to use splash screen as a Loading page before website renders to the user (and/or while MainLayout completes any background activities)?

`<script src="_framework/blazor.web.js" autostart="false"></script>

<script> Blazor.start({ webAssembly: {} }); </script>`

This probably wouldn't work as it needs Blazor to be running for Dialogservice to run, so is there any other way we can use it as a Loading stage for MainLayout?

Kind regards,
Fotis

[vnbaaij]

Nope, can only be done after Blazor has started indeed.

Maybe you can use what is described at https://www.fluentui-blazor.net/Splash Screen and make main screen be smaller than the splash with js?

[fkitsantas]

I figured out Blazr.RenderState on Routes.razor to be a more straightforward way to get the result I wanted.

@using Microsoft.FluentUI.AspNetCore.Components
@using Blazr.RenderState
@inject IBlazrRenderStateService RenderState

@if (RenderState.IsPreRender)
{
    <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" >
        <FluentCard AreaRestricted="false" MinimalStyle="false">
            <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
                <img src="images/SplashScreen-logo.png" style="margin-bottom: 2.5rem;" />
                <FluentProgress Width="70%" />
                <FluentLabel Typo="Typography.H2" Alignment="HorizontalAlignment.Center">Loading...</FluentLabel>
                <FluentLabel Typo="Typography.Subject" Alignment="HorizontalAlignment.Center">Please wait while the app loads</FluentLabel>
            </FluentStack>
        </FluentCard>
    </div> 
}
else
{
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
    </Router>
 }

The splash screen should remain visible while the application is rendering, as its primary purpose is to provide a loading indicator.
Using it afterwards makes no sense.