search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.3k stars 305 forks source link

FluentDesignTheme - `Assertion failed - heap is currently locked` when changing theme #1182

Closed StephenOTT closed 4 months ago

StephenOTT commented 5 months ago

Continuation from: https://github.com/microsoft/fluentui-blazor/issues/1160#issuecomment-1865135542_

I have a panel similar to the demo site panel for switching themes:

image 
@using DesignThemeModes = Microsoft.FluentUI.AspNetCore.Components.DesignThemeModes
@implements IDialogContentComponent

<FluentStack Orientation="Orientation.Vertical">
    <FluentDesignTheme @bind-Mode="@Mode"
                       StorageName="theme"/>

    <FluentSelect Label="Theme"
                  Style="margin-bottom: 30px;"
                  Items="@AllModes"
                  @bind-SelectedOption="@Mode"/>
</FluentStack>

@code
{
    public DesignThemeModes Mode { get; set; }

    private IEnumerable<DesignThemeModes> AllModes => Enum.GetValues<DesignThemeModes>();
}

App.razor:

<FluentDesignTheme StorageName="theme" />
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

and index.html:

<body>
<!-- Set the default theme ("mode" overrides the "storage-name") -->
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
<loading-theme storage-name="theme"></loading-theme>
<!-- End -->
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

When i change themes I get the error above.

Using 4.2.1. Cleared browser/app cache. Using Blazor WASM in chrome

The theme changes and is kept in storage.

image

I also implemented the loading theme: https://www.fluentui-blazor.net/DesignTheme#how-to-remove-the-%22bright-flash%22-on-loading

But that does not work. When loading runs it uses the default theme/loading. There are no errors.

vnbaaij commented 5 months ago

I also implemented the loading theme: https://www.fluentui-blazor.net/DesignTheme#how-to-remove-the-%22bright-flash%22-on-loading

But that does not work. When loading runs it uses the default theme/loading.

Going by the picture you showed above this quoted text, how do you know it is not working? The values from the picture indicate the 'default' theme settings are used/set

StephenOTT commented 5 months ago

@vnbaaij If i set the theme to dark and local storage shows:

image

and then i reload the page:

image

The light version is still showing. Compared with the Docs site, where you change theme and colour and it is represented in the loading window.

AathifMahir commented 5 months ago

@vnbaaij If i set the theme to dark and local storage shows:

image

and then i reload the page:

image

The light version is still showing. Compared with the Docs site, where you change theme and colour and it is represented in the loading window.

Did you added the loading theme component on top of body tag in index.html?

StephenOTT commented 5 months ago

@AathifMahir Yes, per https://github.com/microsoft/fluentui-blazor/issues/1182

image

dvoituron commented 5 months ago

fluent-theme is only for the pre-load. The theme is probably applied with a FluentDesignTheme in another page. Could you check how many FluentDesignTheme do you have in your code?

StephenOTT commented 5 months ago

@dvoituron the FluentDesignTheme is placed in two pages:

  1. MainLayout.razor, and,
  2. The settings panel.

Both code snippets are shown in: https://github.com/microsoft/fluentui-blazor/issues/1182#issue-2052411576

dvoituron commented 5 months ago

I downloaded your code, from your example repo (and the theme branch). The result seems correct when using InteractiveServermode, but a JS error is displayed when using InteractiveAutomode. We could check why this error occurs in this mode, but in the meantime you could change the RenderMode for this component.

https://github.com/microsoft/fluentui-blazor/assets/8350694/f2d44565-039b-4bad-8b0b-d977d842db67

kzu commented 5 months ago

Yes, that InteractiveAuto issue is the same one I had, seems to still be there.

Narvalex commented 5 months ago

I'm using static web assembly build with .NET 8 and a couple of instances of the <FluentDesignTheme> component and also have the same error in the console log. Should I only use one instance for the app? Im using a second one for the settings page.

Uncaught (in promise) Error: Assertion failed - heap is currently locked
    at Ot (blazor.webassembly.js:1:46748)
    at Object.beginInvokeDotNetFromJS (blazor.webassembly.js:1:44671)
    at g.invokeDotNetMethodAsync (blazor.webassembly.js:1:3956)
    at S.invokeMethodAsync (blazor.webassembly.js:1:5464)
    at As.<anonymous> (FluentDesignTheme.razor.js:7:30)
    at As.dispatchAttributeChanged (DesignTheme.ts:272:12)
    at As.attributeChangedCallback (DesignTheme.ts:223:14)
    at le.setOrRemoveAttributeOrProperty (blazor.webassembly.js:1:28025)
    at le.applyAttribute (blazor.webassembly.js:1:26970)
    at le.applyEdits (blazor.webassembly.js:1:23940)
AathifMahir commented 4 months ago

Is there any ETA for this fix, I'm kind a blocked on Releasing a Build to Production due to this issue? @vnbaaij

StephenOTT commented 4 months ago

is everyone having lack of light vs dark on the loading page? Is it confirmed that the loading page always using the light theme part of this issue?

dvoituron commented 4 months ago

@StephenOTT See this documentation page.

To avoid a "flash" effect when the page loads (mainly in dark mode), as described below, we recommend you add these lines of code to the index.html or App.razor file (or _layout.cshtml file if you upgraded you project from an earlier .NET version).

<!-- 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
dvoituron commented 4 months ago

This problem will be corrected with this PR: #1419

AathifMahir commented 4 months ago

This problem will be corrected with this PR: #1419

Anything on this issue https://github.com/microsoft/fluentui-blazor/issues/1148

This issue is happening when the theme is set to system