Styles are not loaded on Stream Rendering - FluentUI Template

[Verfranc]

I modified Home.razor to this...

---

@page "/"
@attribute [StreamRendering]

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new Fluent Blazor app.

Waiting @count out of 5

@code {
    int count;

    protected override async Task OnInitializedAsync()
    {
        for (var i = 0; i < 5; i++)
        {
            await Task.Delay(1000);
            count++;
            StateHasChanged();
        }
    }
}

---

The fluentui styles were not loaded at the start of the count. Is this a known limitation?

[vnbaaij]

It wasn't know yet, but it is now 😉!

What happens is that the web components script (that loads the styling) is called after lazorhas started and that isn't until the OnInitializedAsync is done. There is nothing we can do about that.
What you can do is add the following in your App.razor after the <Routes /> component:

<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>

That way you are basically jumpstarting the web components script yourself ahead of Blazor doing it. JavaScript handles the loading of the script twice perfectly fine.
There will still be a flash but it will at least be much shorter. Styling will be applied before the count starts to increase.

The best solution is still to not do any blocking work in a SSR based home page. If you then want to prevent the flash of unstyled content, see https://www.fluentui-blazor.net/DesignTheme#how-to-remove-the-%22bright-flash%22-on-loading

[Verfranc]

Thank you for the guidance. This is not even an issue, it is explained in https://github.com/microsoft/fluentui-blazor (Scripts section).