-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Center and fade in the default loading screen. #18548
Comments
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). |
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 |
1 similar comment
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 |
So I guess no solution so far? |
@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:
I think that if we did something 'built-in' it would involve techniques similar to this anyway. |
Unfortunately, this does not work, as the
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. |
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:
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? |
Thanks! This is a perfect solution! |
Is there an existing issue for this?
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 toblazor-loading
.The text was updated successfully, but these errors were encountered: