Center and fade in the default loading screen.

[pekspro]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Currently (.NET 8 RC2), the loading screen for blazor in MAUI hybrid applications looks like this:

Not pretty :-( The loading screen for the web assembly version looks like this:

A lot better. But there is room for improvements I think :-)

Describe the solution you'd like

Both loading screens should be centered on the screen. Also, they should show nothing for a second, and then if the system still loads it should fade in the loading screen. In many cases loading will take less than a second, and currently it causes flickering.

Additional context

Here is a sample project with the changes:
https://github.com/pekspro/MauiIssues/tree/51879-AspNetCore-LoadingImprovement

These are the changes I've done:
pekspro/MauiIssues@3aa09d2

I have also renamed loading classes to blazor-loading.

[Eilon]

I talked to @danroth27 and we think the "loading circle" probably doesn't make much sense in .NET MAUI apps because there are no resource being downloaded. It's just waiting for Blazor itself to load and finish rendering the first component.

We'll hold onto this issue so we can consider how to generally improve this experience in the future, either by making the static HTML look nicer (like what's done in the proposal above), or perhaps by even hiding the web view entirely until it's done loading (behind a splash screen on mobile, and unknown on desktop).

[pekspro]

Just to clarify, in MAUI version there is just the Loading... text, the "loading circle" is only in the Blazor webassembly version.

Loading everything behind the splash screen in MAUI would absolutely be nice, there is already an issue for this: #10044

[pekspro]

Just to clarify, in MAUI version there is just the Loading... text, the "loading circle" is only in the Blazor webassembly version.

Loading everything behind the splash screen in MAUI would absolutely be nice, there is already an issue for this: #10044

[Ferents911]

So I guess no solution so far?

[Eilon]

@Ferents911 there is no built-in or default solution at the time, but it's something that any app could do on its own.

For example:

• Change the HTML in wwwroot/index.html to have a different style or behavior. You can put any HTML you want inside the <div> in the default file (for example, <div id="app">SUPER FANCY Loading!!!</div>) and also you can add JS or other things if you want.
• An app could leave the BlazorWebView hidden until it's done loading. The app could show a native-drawn loading screen using XAML or other techniques, and when Blazor is done loading, hide the native-drawn loading screen and show the BlazorWebView. Detecting when Blazor is done loading could involve several different techniques, but could be as simple as waiting for the BlazorWebViewInitialized event, or putting some C# code in the .razor files that triggers it.

I think that if we did something 'built-in' it would involve techniques similar to this anyway.

[RiediJohannes]

Detecting when Blazor is done loading could involve several different techniques, but could be as simple as waiting for the BlazorWebViewInitialized event, [...]

Unfortunately, this does not work, as the BlazorWebViewInitialized event is explicitly fired before any web component is rendered.

BlazorWebViewInitialized, with an accompanying BlazorWebViewInitializedEventArgs object, which is raised after the is initialized but before any component has been rendered. This event enables retrieval of the platform-specific web view instance.

I tried this solution with a native loading sceen until the event is fired but I still suffered from this weird black screen until Blazor is fully loaded.

[Eilon]

Hi everyone, I was playing around with this and built a sample app that I think works well: https://github.com/Eilon/maui18548LoadingScreen

The notable parts of the app are:

1. A 'loading' service that the app uses to communicate what % is loaded, and when it's done loading: https://github.com/Eilon/maui18548LoadingScreen/blob/main/maui18548LoadingScreen/AppReadyService.cs
2. The 'loading...' UI in XAML that is shown at startup (and the BlazorWebView below it is hidden): https://github.com/Eilon/maui18548LoadingScreen/blob/main/maui18548LoadingScreen/MainPage.xaml#L9-L12
3. The 'slow' loading code to simulate an app that has Blazor-based code that takes a long time. It notifies the app of the progress as well: https://github.com/Eilon/maui18548LoadingScreen/blob/main/maui18548LoadingScreen/Components/Pages/Home.razor#L23-L37
4. The UI code that updates the progress bar and when it's done loading, shows the BlazorWebView: https://github.com/Eilon/maui18548LoadingScreen/blob/main/maui18548LoadingScreen/MainPage.xaml.cs#L19-L33

It's ultimately up to any given app to decide in part (2) what UI to show, and for (3) how to decide what's loaded and when. Here I just simulated things using delays, but you could imagine it's loading data over a network, or calculating some startup logic.

I tested on Windows and Android only for now and it seemed to work fine. I see the 0%... 100% progress loading, and then the BlazorWebView becomes visible after it gets to 100%.

Does this sample seem useful to folks? Does it work for you? What would you change?

[FM1973]

Thanks! This is a perfect solution!