CODEWITHSUNDEEP
blazorfluent-ui
maksim
maksim

Reputation: 498

Microsoft.FluentUI rendering problem on refresh

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

enter image description here

enter image description here

Is it possible to eliminate those blinkings?

Upvotes: 1

Views: 647

Answers (1)

Alamakanambra
Alamakanambra

Reputation: 7891

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.

Upvotes: 1

Related Questions