MudSplashScreen: Displays an SVG While Loading Page in Background, Fades to Content

[jperson2000]

Hello there, I have some Blazor code for a loading splash screen I've been using that I'm willing to share if people think it's a good fit for the library. Here's its features:

• When added to your MainLayout.razor, displays an SVG when the page first loads
• Blazor components for the actual page continue to initialize in the background
• After a configurable number of seconds, the SVG overlay fades smoothly into the fully loaded page via a CSS transition.

Here's how it looks in my layout currently:

MainLayout.razor

<LoadingScreen DelaySeconds="2">
    <LoadingContent>
        <svg height="80%" viewBox="0 0 512 512" xmlns="..." [SVG Logo]>
    </LoadingContent>
    <ChildContent>
        <MudLayout>
            [Regular components, MudAppBar, page body, etc.]
        </MudLayout>
    </ChildContent>
</LoadingScreen>

The current component has a lot of inline CSS styles, so it should be moved to a stylesheet, but other than that I think it would play nicely with other MudBlazor controls. I've been using it in production for about a year without issue.

[Yomodo]

Last night I was wondering how I could do this and this morning I see your post.
Thus: Yes! I would love to have this!

[jperson2000]

Thanks for the vote, @Yomodo! Draft PR 8478 was submitted today for this effort, and hopefully I can get good documentation finished this week.

[ScarletKuro]

@henon what do you think, do we need such addition?
I personally don't mind new components as long the component have a straightforward implementation, bUnit tests and xmldocs.
I guess I could find a use for this component in my projects, tho I just use MudOverlay with almost same purpose just less fancy.

[henon]

Yes, I think this would be a good fit for the library. @jperson2000 you are welcome to PR and tag somebody from the team for review. A documentation page in the docs with a nice looking example should be included as well.

[jperson2000]

Ok great, thanks for the feedback; I'll get that submitted this week. I think the example will be a bit of a challenge since it would only show on the first page load (versus navigating to an example), but perhaps I can do a toggle button to show/hide the splash screen. Can I get your advice on a couple of things?

• Do you have a preference on a name? MudLoadingScreen, MudSplashScreen?
• Do you have a preferred name for CSS classes for the overlay?

Thanks and of course thanks for all of your hard work to make MudBlazor an amazing library!

[ScarletKuro]

I would vote for MudSplashScreen name. Don't have an opinion for css class names.