ASP.NET Blazor WASM FOUC( flash of unstyle content) problem

Question

We are building a website in Blazor's WSAM, we have many pages with complicate CSS styling. Instead of include all css file in index.html, we embed the page's css in the razor component. We know that we can isolate the css file with razor component. However, some of the pages' are using Dynamic components, it seems the isolate css is not working well with Dynamic components. Also we don't like the idea that all styling are under one big css file.

When we load the page, we find blazor load the elements before CSS and cause the FOUC problem.

Just asking doesn't anyone experienced such problem， how to you solve it?

I was trying to hide the elements and display with settimeout in js. But I am not sure, if this is the right approach?

Blazor code:

   <link href="css/pagespecific.css" rel="stylesheet" />
    <style>
    .container
    {
        display:none;
    }
    </style>

    <container> 
      <all elemetns under contianers>
    </container>

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            ijsImportedJS = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/jsfunctions.js");
            await ijsImportedJS.InvokeVoidAsync("callingOnPageLoad");
        }
    }

JS part:

    export function callingOnPageLoad() {
        setTimeout(displayUI, 500);
    };

    function displayUI() {
       $(".container").css("display", "initial");

    }