Microsoft.FluentUI rendering problem on refresh

Question

Have a rendering problem when using FluentUI. The problem is - when you refresh the page (F5) - it is blinking (looks like initially it's rendered without any styles and only after few milliseconds the styles are applied)

It's easily can be reproduced with using FluentUI template

dotnet new install Microsoft.FluentUI.AspNetCore.Templates
dotnet new fluentblazor --name MyFluentApp
cd MyFluentApp
dotnet run

Especially, this is easy to see on /weather page

Is it possible to eliminate those blinkings?

Alamakanambra · Accepted Answer · 2024-03-17 20:40:17Z

1

The problem is here:

for proper styling it needs to load the _content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js
blazor.web.js is the caller for this js library
blazor.web.js is called as last
content (unstyled) is loaded before the js lib is loaded, thus the blinking.

Solution:

load the js lib before the content, place this to your <head>:

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

note that instead of blinking it will show nothing, thus might look "slow".
also note that when you disable cache (in browser dev tools) this workaround wont work - because it loads the js lib and blazor.web.js will load it again.

answered Mar 17, 2024 at 20:40

Alamakanambra

8,0565 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maksim Over a year ago

Possibly it was workaround for some previous versions. Not working for the latest. Found other additions:

<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>     <loading-theme storage-name="theme"></loading-theme>

, but these don't help much. Button on /counter page is jumping when page is refreshed.

Ashirafu Miiro · Accepted Answer · 2025-04-12 06:55:51Z

0

Adding the following lines in the head section solved it for me.

    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js"></script>
    <!-- Set the default theme -->
    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
    <loading-theme storage-name="theme"></loading-theme>

answered Apr 12 at 6:55

Ashirafu Miiro

411 silver badge2 bronze badges

Collectives™ on Stack Overflow

Microsoft.FluentUI rendering problem on refresh

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related